微信小程序 分類(lèi)切換的實(shí)現(xiàn)

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

分類(lèi)頁(yè)面category.wxml

  <!--左側(cè)分類(lèi)菜單  -->
    <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)用那個(gè)分類(lèi))

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

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