使用mescroll完成虚拟列表

Question

使用mescroll插件上拉加载数据会全部都渲染出来请问有使用过这个插件做过虚拟列表代优化的老哥吗，或者配合其他插件使用也可以。

Answer 1

• 请看👉 ：MeScroll 移动端刷新，分页
• 除此之外, 这篇博客: mescroll使用上拉加载、下拉刷新中的 一个页面多次调用mescroll 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 注：this.navData[1].mescroll.resetUpScroll(); // 点击筛选重置方法

  <template>
    <div class="healthy-bean-record-c">
      <div class="top">
        [外链图片转存失败(img-pPYyrr3K-1562119870434)(https://mp.csdn.net/assets/images/mine/tixianjilu.png)]
      </div>
      <div class="navLine">
        <!-- <van-tabs v-model="active" swipeable animated> -->
        <van-tabs v-model="active" swipeable>
          <van-tab :title="navData[0].tit">
          
          	//参数名和初始化方法名需进行区分
            <mescroll-vue ref="mescroll0" :up="mescrollUp0" @init="mescrollInit0">
              <div class="item" v-for="(item,index) in navData[0].dataList">
                <span class="s1">{{item.desc}}</span>
                <span class="s2">{{item.addtime}}</span>
                <span class="s3" v-if="item.status==1">+{{item.num}}健康豆</span>
                <span class="s3" v-else-if="item.status==2">-{{item.num}}健康豆</span>
              </div>
            </mescroll-vue>
          </van-tab>
          <van-tab :title="navData[1].tit">
  			
  			//参数名和初始化方法名需进行区分
            <mescroll-vue ref="mescroll1" :up="mescrollUp1" @init="mescrollInit1">
              <div class="item" v-for="(item,index) in navData[1].dataList">
                <span class="s1">{{item.desc}}</span>
                <span class="s2">{{item.addtime}}</span>
                <span class="s3">+{{item.num}}健康豆</span>
              </div>
            </mescroll-vue>
          </van-tab>
          <van-tab :title="navData[2].tit">
  
  		//参数名和初始化方法名需进行区分
            <mescroll-vue ref="mescroll2" :up="mescrollUp2" @init="mescrollInit2">
              <div class="item" v-for="(item,index) in navData[2].dataList">
                <span class="s1">{{item.desc}}</span>
                <span class="s2">{{item.addtime}}</span>
                <span class="s3">-{{item.num}}健康豆</span>
              </div>
            </mescroll-vue>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </template>
  <script>
  import MescrollVue from "mescroll.js/mescroll.vue";
  import axios from "axios";
  import qs from "qs";
  export default {
    data: function() {
      return {
        // 三个配置项
        mescrollUp0: {
          callback: this.upCallback
        },
        mescrollUp1: {
          callback: this.upCallback
        },
        mescrollUp2: {
          callback: this.upCallback
        },
        // 使用数组接收三个列表
        navData: [
  		        {
  		          tit: "全部",
  		          mescroll: null,
  		          dataList: []
  		        },
  		        {
  		          tit: "收入",
  		          mescroll: null,
  		          dataList: []
  		        },
  		        {
  		          tit: "支出",
  		          mescroll: null,
  		          dataList: []
  		        }
        	]
      };
    },
    components: { MescrollVue },
    methods: {
     // 三个初始化方法
      mescrollInit0(mescroll) {
        this.navData[0].mescroll = mescroll;
      },
      mescrollInit1(mescroll) {
        this.navData[1].mescroll = mescroll;
      },
      mescrollInit2(mescroll) {
        this.navData[2].mescroll = mescroll;
      },
      // 一个公用的回调函数，使用if判断是哪个
      upCallback(page, mescroll) {
        console.log(page);
        console.log(this.active);
        if (this.active === 0) {
  	        //全部
  	        this.$http("/cml/api/newuser/jiankang", {
  	          /*pageNum: page.num,
  	          pageSize: this.pageSize,*/
  	          status: -1
  	        })
  	          .then(res => {
  	            let arr = res.data;
  	            if (page.num === 1) {
  	              this.navData[0].dataList = [];
  	            }
  	            this.navData[0].dataList = this.navData[0].dataList.concat(arr);
  	            this.$nextTick(() => {
  	              mescroll.endSuccess(arr.length, false);
  	            });
            })
            .catch(err => {
              mescroll.endErr();
            });
        } else if (this.active === 1) {
  	        // 收入
  	        this.$http("/cml/api/newuser/jiankang", {
  	          /*pageNum: page.num,
  	          pageSize: this.pageSize,*/
  	          status: 1
  	        })
  	          .then(res => {
  	            let arr = res.data;
  	            if (page.num === 1) {
  	              this.navData[1].dataList = [];
  	            }
  	            this.navData[1].dataList = this.navData[1].dataList.concat(arr);
  	            this.$nextTick(() => {
  	              mescroll.endSuccess(arr.length, false);
  	            });
            })
            .catch(err => {
              mescroll.endErr();
            });
        } else {
  	        // 支出
  	        this.$http("/cml/api/newuser/jiankang", {
  	          /*pageNum: page.num,
  	          pageSize: this.pageSize,*/
  	          status: 2
  	        })
  	          .then(res => {
  	            let arr = res.data;
  	            if (page.num === 1) {
  	              this.navData[2].dataList = [];
  	            }
  	            this.navData[2].dataList = this.navData[2].dataList.concat(arr);
  	            this.$nextTick(() => {
  	              mescroll.endSuccess(arr.length, false);
  	            });
  	          })
  	          .catch(err => {
  	            mescroll.endErr();
  	          });
  	      }
      }
    }
  };
  </script>
  <style lang="less" scoped>
  /*固定高度*/
  .mescroll {
    position: fixed;
    top: 6.07rem;
    bottom: 0;
    height: auto;
    /*如设置bottom:50px,则需height:auto才能生效*/
  }
  
  .van-tabs--line {
    padding-top: 1.32rem;
  }
  
  /deep/.van-tabs--line .van-tabs__wrap {
    height: 1.32rem;
  }
  
  .healthy-bean-record-c {
    &:before {
      content: "";
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: white;
    }
  
    .top {
      width: 100%;
      height: 3.4rem;
      text-align: center;
      border-bottom: 0.05rem solid #d9d9d9;
  
      .img {
        width: 2.26rem;
        padding-top: 0.6rem;
      }
    }
  
    .item {
      margin: 0.8rem 0.74rem;
      display: flex;
      justify-content: space-between;
  
      .s1 {
        width: 30%;
        font-size: 0.34rem;
        color: #232323;
      }
  
      .s2 {
        width: 45%;
        font-size: 0.32rem;
        color: #232323;
        text-align: center;
      }
  
      .s3 {
        width: 25%;
        font-size: 0.31rem;
        color: #ac415d;
        text-align: right;
      }
    }
  }
  </style>