使用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>