vue.js 分页加载，向上滑动，依次加载数据。

export default {
    layout: 'default',
    data(){
      return{
        page:1,
        pageSize:10,
        orderListArr:[],
        prodListLoadingOver:false,
        prodListLastPage: false,
      }
    },
    mounted(){
      window.addEventListener('scroll', this.handleScroll);
    },
    created(){
      this.fetchOrderListAction();
    },
    methods:{
      fetchOrderListAction(){
        let reqBody = {};
        reqBody.page = this.page;
        reqBody.pageSize = this.pageSize;
        this.prodListLoadingOver = false;
        fetchOrderList(JSON.stringify(reqBody)).then((res) => {
          let resData = res.data;
          if (resData.respHeader && resData.respHeader.resultCode === 0) {
            this.prodListLoadingOver = true;
            this.orderListArr = resData.respBody.subsList;
            if(this.page == 1){
              this.orderListArr = resData.respBody.subsList;
            }else{
              this.orderListArr = this.orderListArr.concat(resData.respBody.subsList);
            }
            if(resData.respBody.subsList.length < this.pageSize){
              this.prodListLastPage = true;
            }
          }else{
            Toast({
              message: resData.respHeader.message || "网络异常",
            });
          }
        });
      },
      handleScroll(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //屏幕的高度
        let prodListHeight = document.querySelector('.myOrderListWrapper').offsetHeight-h-20;  //.myOrderListWrapper 商品列表容器
        console.log(scrollTop,":::",prodListHeight)
        if(scrollTop > prodListHeight && this.prodListLoadingOver && !this.prodListLastPage){
          this.page = this.page + 1;
          this.fetchOrderListAction();
        }
      },
    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll);
    }
  }

在mounted中注册滚动事件，在destroyed中销毁。。。其他鼠标事件也是如此。

标签：vue,document,orderListArr,resData,let,scrollTop,js,page,加载
来源： https://www.cnblogs.com/ilovexiaoming/p/11015213.html