• 基于vant-UI框架的vue项目的下拉刷新、上拉加载
  • 安装vantUI

    npm i vant –S

     

    main.js

    import { PullRefresh,List} from 'vant';

    Vue.use(PullRefresh).use(List);

     

    dom结构

    里面的API官网都有,可以去vant官网看

    这里主要讲解一些逻辑

    在data中初始化数据

    pageIndex:1,//页码
    
      dtWinNumberInfos:[],//请求数据
    
      isDownLoading:false,//下拉刷新
    
      isUpLoading:false,//上拉加载
    
      upFinished:false,//上拉加载完毕
    
      offset:100,//滚动条与底部距离小于 offset 时触发load事件

     

    上拉加载请求方法

    onLoadList(){
    
      this.pageIndex++;
    
      this.isUpLoading = true
    
      this._ getOpenDetail();//ajax请求
    
      },

     

    下拉刷新方法

    onDownRefresh(){
    
      this.pageIndex=1
    
      this.isDownLoading = true
    
      this._ getOpenDetail();
    
      },

     

    具体请求方法

     

     

    async _getOpenDetail(){
    
      await getOpenDetail (this.lottery,this.pageIndex,10).then(data =>{
    
        if(data.error === '0'){//请求成功
    
          if(this.dtWinNumberInfos.length){//当请求前有数据时 n次请求
    
            if(this.isUpLoading){// 上拉加载
    
              this.dtWinNumberInfos = this.dtWinNumberInfos.concat(data.dtWinNumberInfo) //上拉加载新数据添加到数组中
    
              this.$nextTick(()=>{ //在下次 DOM 更新循环结束之后执行延迟回调
    
                this.isUpLoading = false  //关闭上拉加载中
    
              })
    
              if(data.dtWinNumberInfo.length<10){//没有更多数据
    
                this.upFinished = true   //上拉加载完毕
    
              }
    
            }
    
            if(this.isDownLoading){//关闭下拉刷新
    
              this.isDownLoading = false //关闭下拉刷新中
    
              this.dtWinNumberInfos = data.dtWinNumberInfo  //重新给数据赋值
    
              if(this.upFinished){ //如果上拉加载完毕为true则设为false。解决上拉加载完毕后再下拉刷新就不会执行上拉加载问题
    
                this.upFinished = false
    
              }
    
            }
    
          }else{//当请求没有数据时 第一次请求
    
            this.dtWinNumberInfos = data.dtWinNumberInfo
    
          }
    
        }
    
      })
    
    }
Logo

前往低代码交流专区

更多推荐