zoukankan      html  css  js  c++  java
  • 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')
              }
            })
          },
    }
  • 相关阅读:
    点评cat系列-服务器开发环境部署
    [FreeRTOS].FreeRTOS CortexM3 M4中断优先级设置总结
    [FreeRTOS]FreeRTOS使用
    [Ethernet].以太网总线详解
    [USB].USB总线详解
    [CAN].CAN总线详解
    [LIN].LIN总线详解
    [SDIO].SDIO总线详解
    [eMMC]eMMC读写性能测试
    [通信]Linux User层和Kernel层常用的通信方式
  • 原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12875975.html
Copyright © 2011-2022 走看看