after you pull up the list and load more, you need to switch the tab bar. Print the data and find that the data is obtained quickly, but the jump and rendering are very slow. Try to clear the previous data when you click or before you request again, but to no avail.
the following is the code to get the data
//
getClassify(type) {
API.product
.getClassify(type)
.then(({data}) => {
if (data.data.length <= 0) {
return;
}
console.log(data.data,"data.data")
this.categories = adaptor.formatCategory(data.data,type);
this.categoryId = this.categories[0].id;
this.pageToFetch = 1;
this.haveNext = true;
this.products = [{ mockdata: true },
{ mockdata: true },
{ mockdata: true },
{ mockdata: true }];//
this.getCatelist(type);
this.$apply();
})
.catch(err => {
console.log(err);
});
}
//
getCatelist(type,cateId = this.categoryId) {
console.log(cateId,"cateId")
let referFrom = this.referFrom
if (this.gettingData) {
return;
}
let page = this.pageToFetch
let commodity = {type,cateId,page}
API.product
.getCatelist({...commodity})
.then(({data})=> {
console.log(data,"data")
wx.stopPullDownRefresh();
this.gettingData = false;
wx.hideLoading();
if (!data.data || !data.data.length) {
if (this.pageToFetch == 1) {
this.products = [];
this.pageToFetch = 1;
this.haveNext = false;
this.showEmpty = true;
this.$apply();
}
return;
}
this.showEmpty = false;
if (this.pageToFetch > 1) {
this.showEmpty = false;
this.products = this.products.concat(
adaptor.formatProduct(data.data, type,referFrom)
);
} else {
this.pageToFetch = 1;
this.haveNext = false;
this.products = adaptor.formatProduct(data.data, type,referFrom);
}
if (data.minId && data.data.length >= API.pageSize) {
this.pageToFetch += 1;
this.haveNext = true;
} else {
this.haveNext = false;
}
this.$apply();
})
.catch(err => {
wx.stopPullDownRefresh();
this.gettingData = false;
this.haveNext = false;
console.log(err);
});
this.gettingData = true;
}
the following is the rendering code
<block wx:if="{{!showEmpty}}">
<view class="Goodslist">
<block wx:for="{{datasource || []}}">
<view class="Goodslistsingle" @tap="godetail({{item.id}},{{item.type}},{{item.referFrom}})" wx:key="item.id">
<block wx:if="{{item.mockdata}}">
<view class="imgwrap gray"></view>
</block>
<block wx:else>
<view class="imgwrap">
<block wx:if="{{item.thumb_url}}">
<image src="{{item.thumb_url}}"/>
</block>
<block wx:else>
<image src="../images/image_default.png"/>
</block>
</view>
</block>
<block wx:if="{{item.mockdata}}">
<view class="title gray"></view>
</block>
<block wx:else>
<view class="title">
<block wx:if="{{item.type == 2}}" >
<image src="../images/applets_title_pdd.png" class="painame"/>
</block>
<block wx:else >
<image src="../images/applets_title_jd.png" class="painame"/>
</block>
<view class="titlename">{{item.name}}</view>
</view>
</block>
<block wx:if="{{item.mockdata}}">
<view class="pricepre gray">
</view>
</block>
<block wx:else>
<view class="pricepre">
<view class="pricein">{{!item.price_discount?" ":item.price_orig}}</view>
<view class="lookin">{{item.sold}}</view>
</view>
</block>
<block wx:if="{{item.mockdata}}">
<view class="pricenow gray">
</view>
</block>
<block wx:else>
<view class="pricenow">
<view class="pricein">
<view class="yuan"></view>
<view class="price">{{item.price_discount || item.price_orig}}</view>
</view>
<view class="counpn" wx:if="{{item.coupon_price}}">
<image class="counpnlp" src="../images/applets_voucher_bg.png"/>
<view class="pricecoupn">{{item.coupon_price}}</view>
</view>
</view>
</block>
</view>
</block>
</view>
</block>
<block wx:else>
<show-abnormalflow :params.sync="params"></show-abnormalflow>
</block>
</template>