微信小程序实现商品分类左右联动
时间: 2023-09-14 16:12:01 浏览: 90
要实现商品分类左右联动,需要使用小程序的组件和API。以下是实现步骤:
1. 在页面中添加左右两个组件,左侧为商品分类列表,右侧为商品列表。
2. 在onLoad生命周期函数中,通过API请求获取商品分类数据,并将其赋值给左侧组件的data属性。
3. 在左侧组件的tap事件中,获取点击的分类ID,并将其传递给右侧组件。
4. 在右侧组件中,通过API请求获取对应分类ID的商品数据,并将其赋值给右侧组件的data属性。
5. 在右侧组件中,监听分类ID的变化,并根据变化重新请求对应分类ID的商品数据。
示例代码:
左侧组件:
```
<view class="category-list">
<block wx:for="{{categoryList}}" wx:key="id">
<view class="category-item"
bindtap="onCategoryTap"
data-categoryid="{{item.id}}"
class="{{activeCategoryId == item.id ? 'active' : ''}}">
{{item.name}}
</view>
</block>
</view>
```
```
Component({
properties: {
categoryList: {
type: Array,
value: []
}
},
data: {
activeCategoryId: 0
},
methods: {
onCategoryTap(event) {
const categoryId = event.currentTarget.dataset.categoryid;
this.setData({
activeCategoryId: categoryId
});
this.triggerEvent('categorychange', categoryId);
}
}
});
```
右侧组件:
```
<view class="goods-list">
<block wx:for="{{goodsList}}" wx:key="id">
<view class="goods-item">
{{item.name}}
</view>
</block>
</view>
```
```
Component({
properties: {
categoryId: {
type: Number,
value: 0
}
},
data: {
goodsList: []
},
observers: {
categoryId: function(newCategoryId) {
this.getGoodsList(newCategoryId);
}
},
methods: {
getGoodsList(categoryId) {
// 调用API请求对应分类ID的商品数据
// 将获取到的商品数据赋值给this.data.goodsList
}
}
});
```
页面代码:
```
<view class="main">
<category-list
categoryList="{{categoryList}}"
bind:categorychange="onCategoryChange">
</category-list>
<goods-list
categoryId="{{activeCategoryId}}">
</goods-list>
</view>
```
```
Page({
data: {
categoryList: [],
activeCategoryId: 0
},
onLoad() {
// 调用API请求商品分类数据
// 将获取到的商品分类数据赋值给this.data.categoryList
},
onCategoryChange(event) {
const categoryId = event.detail;
this.setData({
activeCategoryId: categoryId
});
}
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)