mounted() { window.addEventListener('scroll', this.handleScroll, true); // 監聽(綁定)滾輪滾動事件 this.getBookList();//請求數據 }, destroyed() { window.removeEventListener('scroll', this.handleScroll, true); // 離開頁面清除(移除)滾輪滾動事件 }, data() { return { taskList: [], totlePage: '', params: { page: 1, num: 4, }, count: '', showTxt: '', flags: true, }; }, methods: { handleScroll() { //變量scrollTop是滾動條滾動時,距離頂部的距離 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //變量windowHeight是可視區的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //變量scrollHeight是滾動條的總高度 var scrollHeight = document.documentElement.scrollHeight - 200 || document.body.scrollHeight - 200; //滾動條到底部的條件 if (Math.ceil(scrollTop) + windowHeight >= scrollHeight - 200 && this.flags) { this.flags = false; this.fenye() //寫后台加載數據的函數 console.log("距頂部" + scrollTop + "可視區高度" + windowHeight + "滾動條總高度" + scrollHeight); } }, fenye() { //獲取列表之后 this.totlePage = Math.ceil(this.count / this.params.num); //頁面觸底事件 if (this.params.page >= this.totlePage) { this.showTxt = '加載完成'; return; } this.showTxt = '加載中...'; this.params.page++; this.getBookList() }, //獲取書籍列表 getBookList() { let params = { type: 3, //類型 1音頻 2文字 3視頻 4直播 is_vip: 2, //是否為vip書籍 1否(默認) 2是 pay_type: 2, //付費類型 1免費 2付費 page: this.params.page, num: this.params.num, } this.$post("/books/book/book_list", params).then(res => { if (!res.error_code) { console.log(res.response_data, 'res') this.count = res.response_data.count; this.taskList = this.taskList.concat(res.response_data.lists); //合並數組 this.flags = true; } else { this.$toast(res.error_msg); console.log(res.error_msg, 'error') } }) }, }
