zoukankan      html  css  js  c++  java
  • 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中销毁。。。其他鼠标事件也是如此。
    
    
    
  • 相关阅读:
    Android 数据存储四种方式
    Android 文件系统路径
    Android 修改R包名方法
    Android startActivity 页面跳转
    Android 硬件加速器及其问题小结 gif不显示
    Android 用户界面 ViewGroup(FrameLayout LinearLayout AbsoluteLayout RelativeLayout TableLayout)
    Android 中解决输入法挡住输入框的问题
    Android 调用系统自带应用
    Android onMeasure(widthSpec, heightSpec)
    Android Bitmap Caching Bitmaps(渣翻译)
  • 原文地址:https://www.cnblogs.com/ilovexiaoming/p/11015213.html
Copyright © 2011-2022 走看看