前言:前些天在做vue項目的時候,用到了一個滑動插件,better-scroll,但是插件有好就有壞,用的不好,反而會使事情變的更復雜,由於我寫的是vue項目,那我下面就當做是在vue項目中寫。
1、首先在methods中寫個函數,獲取相關信息
scrollMoreData() {
// 計算 總頁數
this.pageTotal = Math.ceil(this.total / this.goodsParams.pagesize);
const scrollTopHeight = document.documentElement.scrollTop; // 獲取 文檔向上滾動的 距離;
const clientHeight = document.documentElement.clientHeight; // 獲取瀏覽器窗口的 高度;
const offsetHeight = document.querySelector(".goods_list_wrap").offsetHeight; // 獲取滾動 內容的 高度;
if ((scrollTopHeight + clientHeight) - 54 >= offsetHeight) {
// -54 是因爲頂部的 搜索框佔了 54px;
if(this.goodsParams.pagenum>=this.pageTotal){
return this.$toast("沒有更多數據了")
}
this.getGoodsListData();
}
// console.log(this.pageTotal)
console.log(this.total)
},
2、然後在頁面加載後的mounted生命週期函數中調用
mounted() {
// goods_list是獲取到的當前的組件
let goods_list = document.querySelector('.goods_list')
document.addEventListener('scroll', this.scrollMoreData, false)
// console.log(document.querySelector(".goods_list_wrap").offsetHeight)
},