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

基于vant-UI框架的vue项目的下拉刷新、上拉加载安装vantUInpm i vant –S main.jsimport { PullRefresh,List} from 'vant';Vue.use(PullRefresh).use(List); dom结构里面的API官网都有，可以去vant官网看这里主要讲解一些逻辑...

导演字母

6552人浏览 · 2018-12-18 14:37:47

导演字母 · 2018-12-18 14:37:47 发布

基于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

      }

    }

  })

}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^