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

• 基于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       }     }   }) }