vueApp 上拉加載功能(原創)


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')
          }
        })
      },
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM