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 ); } }; }

浙公网安备 33010602011771号