微信小程序做商品分類的切換: 點擊分類切換到相應(yīng)的分類下的商品. 效果如下圖

分類頁面category.wxml

  <!--左側(cè)分類菜單  -->
    <view class="left-box">
    <block wx:for="{{category}}" wx:key="id">
      <view class="menu-item" bindtap='cateTab'  data-index="{{index}}" data-id="{{item.id}}">{{item.name}}</view>
    </block>
    </view>
  <!--右側(cè)數(shù)據(jù)  -->
    <view class="right-box}">
      <view class='foods-type-box'>
      //這里是模板,根據(jù)傳入的數(shù)據(jù)cateData不同顯示不同的數(shù)據(jù)
        <template is="categorydetail" data="{{cateData}}"/>
      </view> 
    </view>
  </view>

切換綁定的js方法
調(diào)用的接口地址:http://xxx.com/category/id (id決定調(diào)用那個分類)

// 分類切換綁定函數(shù)
  cateTab:function(event){
    var index=event.currentTarget.dataset.index;
    this.cateid=event.currentTarget.dataset.id;
    //根據(jù)id請求相應(yīng)的接口,返回對應(yīng)的數(shù)據(jù)
    wx.request({
      url: ':http://xxx.com/category/'+this.cateid,
      success: function(res) {
        this.setData({
            cateData:res
        });
      }
    })
    
  },

怎么才能簡潔的實現(xiàn)切換分類,載入相關(guān)的商品.請大神指教
我上面的代碼好像實現(xiàn)不了實時的變化,應(yīng)該怎么修改了