vue触底,触顶事件
data(){ return{
songList: [], //歌单列表
totalPage: "",
total: "",
pageSize: 10, thisTotalPage: "", pageNumber: 1 } },
methods: {
//添加歌单 addSongList: async function(item, path, trackListIds) { console.log(item); let params = {}; const res = await http.post( api.addSongList + item.deviceSongListId + path + this.trackId, params ); if (res.data.statusCode == 0) { this.pageSize = this.pageNumber * 10; // 保存最开始的总页数 if (this.thisTotalPage == "") { this.thisTotalPage = this.totalPage; } this.inits(1); this.totalPage = this.thisTotalPage; Toast("添加成功"); } this.listShow = false; },
//初始化音频数据 inits: async function(pageNumber) { let data = { pageNum: pageNumber, pageSize: this.pageSize }; const res = await http.get( api.albumSongList + this.$route.query.trackListId + "/" + this.facilityId, data ); if (res.data.statusCode == 0) { this.songList = res.data.data.list; // console.log(this.songList); this.totalPage = res.data.data.pages; this.total = res.data.data.total; } this.pageSize = 10; },
//获取歌单 getSongList: async function() { this.pageNumber += 1; let data = { pageNum: this.pageNumber, pageSize: 10 }; const res = await http.get( api.albumSongList + this.$route.query.trackListId + "/" + this.facilityId, data ); // this.songList = res.data.data.list if (res.data.statusCode == 0) { this.totalPage = res.data.data.pages; this.total = res.data.data.total; // console.log(res.data.data.list); // this.songList = this.songList.concat(res.data.data.list); console.log(this.songList); for (let i = 0; i < res.data.data.list.length; i++) { this.songList.push(res.data.data.list[i]); } this.list = []; for (let i = 0; i < this.songList.length; i++) { this.list.push(i); } this.loading = false; } },
//页面滚动到底之后会触发一次, onLoad() { this.loading = true; let self = this; // console.log(this.pageNumber) // console.log(this.thisTotalPage) if (this.thisTotalPage != "") { if (self.pageNumber < self.thisTotalPage) { // self.finished = true; setTimeout(() => { self.getSongList(); }, 2000); } else { self.loading = false; } } else { if (self.pageNumber < self.totalPage) { // self.finished = true; setTimeout(() => { self.getSongList(); }, 2000); } else { self.loading = false; } } }, }
created() { let _this = this; window.onscroll = function() { //变量scrollTop是滚动条滚动时,距离顶部的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件 if (scrollTop + windowHeight == scrollHeight) { //写后台加载数据的函数 _this.onLoad(); console.log( "距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight ); } }; }