zoukankan      html  css  js  c++  java
  • vue中vant-list组件实现下拉刷新,上滑加载

    后端返回的数据是一股脑的情况(不是按pageSize,pageNum一组一组的发送)时,前端使用vant-list实现懒加载需要再写一点js,记录一下

     main.js:

    Vue.use(List);
    Vue.use(PullRefresh);
    template:
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多数据了"
            @load="onLoad">
            <div class="listOne" v-for="(item,index) in listAll" :key="index" v-show='item.arrtFlag'>           对原先渲染的对象名更改
                 //每一条数据渲染的标签内,这里仅以index为例
                <span>{{index}}</span>
            </div>
         </van-list>
    </van-pull-refresh>
    data(){
          return{
             matchList:[],
             listAll: [],
             loading: false,
             finished: false,
             refreshing: false,
             dataLength:0, //原数组长度
             count: 0,
          }
        },
    methods:{
        getfmatch(){
            // 一系列操作(请求接口,处理数据准备渲染页面的data)
            this.matchList = data
            this.dataLength = data.length
      },
       
     onLoad() {
            setTimeout(() => {
              if (this.refreshing) {
                this.listAll = [];
                this.refreshing = false;
              }
              this.count++
              console.log(this.count)                                       //打印当前上滑次数,按每次递增10条将this.matchList的每一条放进大数组listAll
              this.listAll = []
              for (let i = 0; i < 10*this.count; i++) {
                this.listAll.push(this.matchList[i]);
              }
              this.listAll = this.listAll.filter(item => item)          //因为是按10的倍数push数据,产生的undefined项需要被移除
              this.loading = false;
              if (this.listAll.length >= this.dataLength) {          //防止重复push  
                this.finished = true;
              }
            }, 800);
          },
          onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true,表示处于加载状态
            this.loading = true;
            this.onLoad();
          },
    }
  • 相关阅读:
    YZR.Data 事务处理(Tranaction)
    啊Ran讲微信开发(.net) :公众号(服务号)+自定义服务器(OAuth授权登录)
    啊Ran讲微信开发(.net) 目录结构
    啊Ran讲微信开发(.net) :公众号(订阅号)+自定义服务器(自定义菜单)
    js和jQuery的总结
    Javascript重要解析
    IntelliJ-项目配置,解决no artifacts的warnings
    农夫过河问题(java版)
    redis安装常见问题
    idea 项目中 maven 编译出错Fatal error compiling: 无效的目标发行版: 1.8 -> [Help 1] 解决方法
  • 原文地址:https://www.cnblogs.com/wd163/p/12981995.html
Copyright © 2011-2022 走看看