WeChat Mini Programs tab switching data display is slow

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

.

clipboard.png


  // 
  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>

OK, solved. Finally, after all kinds of debugging are on, it is found that the active switch is very slow when you click, that is, there is a problem when you click, and the solution is also very simple. Put @ tap in front of class and change 'active':'' to' active':'activf',. This will play the role of a placeholder, which will be much faster than directly clearing it and then adding it.
is as follows:
< view @ tap= "ontab ({{index}})" class= "listsingle {{current = = index?'active':'activf'}}" > {{item.name}} < / view >

Menu