微信小程序 分类切换的实现

Question

微信小程序做商品分类的切换: 点击分类切换到相应的分类下的商品. 效果如下图

分类页面category.wxml

  <!--左侧分类菜单  -->
    <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>
  <!--右侧数据  -->
    <view class="right-box}">
      <view class='foods-type-box'>
      //这里是模板,根据传入的数据cateData不同显示不同的数据
        <template is="categorydetail" data="{{cateData}}"/>
      </view> 
    </view>
  </view>

切换绑定的js方法
调用的接口地址:http://xxx.com/category/id (id决定调用那个分类)

// 分类切换绑定函数
  cateTab:function(event){
    var index=event.currentTarget.dataset.index;
    this.cateid=event.currentTarget.dataset.id;
    //根据id请求相应的接口,返回对应的数据
    wx.request({
      url: ':http://xxx.com/category/'+this.cateid,
      success: function(res) {
        this.setData({
            cateData:res
        });
      }
    })
    
  },

怎么才能简洁的实现切换分类,载入相关的商品.请大神指教
我上面的代码好像实现不了实时的变化,应该怎么修改了

Answer 1

你这样写实现不了的，用scroll-view和scroll-into-view,这里面有相似的效果那你可以看看
传送门