微信小步调实现左侧商品范例选择，右边表现商品列表的效果？

在微信小步调中实现一个左侧为商品范例选择，右侧表现商品列表的效果，通常涉及到利用 scroll-view、view、swiper 等组件来布局和展示内容。下面是一个简单的实现思绪和代码示例：
  计划布局

我们可以利用一个 scroll-view 包裹左侧的商品范例列表，右侧用一个 scroll-view 或 view 来展示商品列表。为了实现联动效果，可以在点击商品范例时更新右侧的商品列表。
根本布局

1. <view class="container">
2.   <!-- 左侧商品类型选择 -->
3.   <scroll-view class="left-side" scroll-y="true" scroll-with-animation>
4.     <view class="item" wx:for="{
5.    
6.     {categories}}" wx:key="index" bindtap="onCategoryChange" data-category="{
7.    
8.     {item}}">
9.       {
10.   
11.   {item.name}}
12.     </view>
13.   </scroll-view>
15.   <!-- 右侧商品列表 -->
16.   <scroll-view class="right-side" scroll-y="true" scroll-with-animation>
17.     <view class="product" wx:for="{
18.    
19.     {products}}" wx:key="index">
20.       <image src="{
21.    
22.     {item.image}}" class="product-image" />
23.       <view class="product-info">
24.         <text>{
25.   
26.   {item.name}}</text>
27.         <text>{
28.   
29.   {item.price}}</text>
30.       </view>
31.     </view>
32.   </scroll-view>
33. </view>

复制代码

页面样式

1. .container {
2.    
3.    
4.   display: flex;
5. }
7. .left-side {
8.    
9.    
10.   width: 200rpx;
11.   height: 100%;
12.   background-color: #f5f5f5;
13. }
15. .right-side {
16.    
17.    
18.   flex: 1;
19.   padding: 20rpx;
20. }
22. .item {
23.    
24.    
25.   padding: 10rpx;
26.   text-align: center;
27.   background-color: #ffffff;
28.   margin-bottom: 10rpx;
29.   border-radius: 5rpx;
30. }
32. .product {
33.    
34.    
35.   display: flex;
36.   flex-direction: column;
37.   align-items: center;
38.   margin-bottom: 20rpx;
39. }
41. .product-image {
42.    
43.    
44.   width: 150rpx;
45.   height: 150rpx;
46. }
48. .product-info {
49.    
50.    
51.   text-align: center;
52. }

复制代码

页面逻辑

在 js 文件中，处置惩罚商品范例的点击事故，并根据选中的范例更新商品列表：

1. Page({
2.    
3.    
4.   data: {
5.    
6.    
7.     categories: [
8.       {
9.    
10.     id: 1, name: '电子产品' },
11.       {
12.    
13.     id: 2, name: '服装' },
14.       {
15.    
16.     id: 3, name: '家居' },
17.       // 其他类别...
18.     ],
19.     products: [],  // 商品列表
20.   },
22.   onLoad: function () {
23.    
24.    
25.     // 初始加载电子产品的商品列表
26.     this.loadProductsByCategory(1);
27.   },
29.   // 处理点击类别，更新商品列表
30.   onCategoryChange: function (e) {
31.    
32.    
33.     const category = e.currentTarget.dataset.category;
34.     this.loadProductsByCategory(category.id);
35.   },
37.   // 根据类别加载商品
38.   loadProductsByCategory: function (categoryId) {
39.    
40.    
41.     // 假设这里是从服务器获取数据，示例使用静态数据
42.     let productList =

复制代码