bug
Solve the problem of slow data splicing in repeated tab switching interface. If it is the first page, it will not be spliced.this.list = this.page == 1 ? data : this.list.concat(data)
html
<view class="plr-30">
<empty v-if="list.length==0&&status != 'loading'" top="280"></empty>
<view class="mt-30 mb-50" v-for="(item,i) in list" :key="i" @click="toDetail(item)">
<view class="size-32 u-line-2">{
{
item.title}}</view>
</view>
<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
</view>
data
data() {
return {
page: 1,
status: 'loadmore',
list: [],
}
},
method
getList() {
this.status = "loading";
this.$http('/other/news/listApp', {
pageNum: this.page,
pageSize: 10
}).then(res => {
let data = res.rows
// ********* 解决重复tab切换接口慢数据拼接问题，如果是第一页不拼接
this.list = this.page == 1 ? data : this.list.concat(data)
// ****** 根据总条数计算总页数
let total = parseInt(res.total / 10) + ((res.total % 10) == 0 ? 0 : 1)
if (this.page == total) {
this.status = "nomore"
} else {
this.page = this.page + 1
this.status = "loadmore"
}
uni.stopPullDownRefresh();
})
},
update() {
this.page = 1
this.list = []
this.getList()
},
Pull down, bottom out
onPullDownRefresh() {
this.update()
},
onReachBottom() {
//避免多次触发
if (this.status == 'loading' || this.status == 'nomore') {
return;
}
this.getList()
},