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

Z时代
2024-01-10
分类：技术分享

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

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

分类页面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
});
}
})},

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