微信小程序tab切换数据显示缓慢

Question

将列表上拉加载更多后，需要切换tab栏，打印数据发现数据很快就拿到了，但是跳转和渲染很慢，有尝试在点击的时候或者再次请求之前清空之前的数据，但是没效果，还是会很慢
以下是获取数据的代码

  // 商品分类
  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;
  }

下面是渲染的代码

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

Answer 1

好了，解决了，最后各种调试全开之后发现点击的时候active切换的很缓慢，那就是点击的时候出问题了，解决办法也很简单，将@tap放在class前面，将'active':''改为'active':'activf'，这样就起到一个占位符的作用，就比直接清除了然后再添加的话就会快很多。
如下：
<view @tap="ontab({{index}})" class="listsingle {{current == index?'active':'activf'}}" >{{item.name}}</view>