微信小程序 侧边栏 商品栏联动代码

### 回答1：
微信小程序中, 侧边栏和商品栏联动的代码可能长这样:

// 在侧边栏组件中

// 1. 声明一个自定义事件, 名称为 selectCategory

// 2. 在点击侧边栏每一项时, 触发自定义事件, 并将当前点击的分类的id作为参数传递

onCategoryClick: function (e) {
  let id = e.currentTarget.dataset.id
  this.setData({
    activeCategoryId: id
  })
  this.triggerEvent('selectCategory', { id: id }, {})
}

// 在商品列表组件中

// 1. 监听侧边栏的 selectCategory 自定义事件

// 2. 在事件处理函数中, 获取到当前选中的分类id, 然后请求对应的商品数据并更新商品列表

pageLifetimes: {
  show: function () {
    this.getGoodsList()
  }
},
methods: {
  getGoodsList: function () {
    let that = this
    WxRequest.get({
      url: '/goods/list',
      data: {
        categoryId: that.data.categoryId
      }
    }).then(res => {
      if (res.code === 0) {
        that.setData({
          goodsList: res.data.goodsList
        })
      }
    })
  },
  onSelectCategory: function (e) {
    let id = e.detail.id
    this.setData({
      categoryId: id
    })
    this.getGoodsList()
  }
}

希望这能帮到你!

### 回答2：
微信小程序的侧边栏和商品栏联动的代码可以通过监听组件的点击事件来实现。以下是一个简单的示例：

1. 在json文件中设置页面结构，包括侧边栏和商品栏的组件，例如：

{
  "usingComponents": {
    "sidebar": "/components/sidebar",
    "product-list": "/components/product-list"
  }
}

2. 在wxml文件中编写页面布局，包括侧边栏和商品栏的位置及样式。

<sidebar bind:selectItem="onSidebarItemClick"></sidebar>
<product-list products="{{products}}"></product-list>

3. 在js文件中编写逻辑代码，包括监听侧边栏点击事件和更新商品栏数据。

Page({
  data: {
    products: []
  },
  onLoad: function() {
    // 从服务器获取商品数据，并更新到this.data.products中
  },
  onSidebarItemClick: function(event) {
    const selectedCategory = event.detail.category; // 获取点击的侧边栏分类
    // 根据分类筛选商品数据，并更新到this.data.products中
    this.setData({
      products: filteredProducts
    });
  }
})

4. 在侧边栏组件的js文件中，编写点击事件的触发和传递函数。

Component({
  methods: {
    onItemClick: function(event) {
      const category = event.currentTarget.dataset.category; // 获取点击的分类
      this.triggerEvent('selectItem', {
        category: category
      });
    }
  }
})

这样，当侧边栏中的某个分类被点击时，就会触发selectItem事件，在页面的onSidebarItemClick方法中处理该事件，根据选择的分类筛选商品数据并更新到商品栏中。

### 回答3：
微信小程序侧边栏商品栏联动代码的实现主要是通过使用wxml、wxss和js文件，并结合微信小程序提供的API来实现的。

首先，需要在wxml文件中创建一个侧边栏和商品栏的布局。可以使用<view>标签来创建侧边栏，并使用<scroll-view>标签来创建商品栏。可以给<scroll-view>标签添加一个id属性，方便在js文件中获取该元素。然后，分别为侧边栏和商品栏中的每个商品项添加一个点击事件，用来触发联动效果。

接下来，在js文件中，可以通过选择器获取侧边栏和商品栏的元素。可以使用wx.createSelectorQuery()方法来获取指定元素的信息。获取到元素后，可以使用setData()方法将数据传递给wxml文件，从而更新显示的内容。

在点击侧边栏的商品项时，可以触发相应的点击事件。点击事件中，可以根据点击的商品项的索引，来滚动到对应商品栏中的商品项位置。可以使用wx.pageScrollTo()方法来实现滚动，传入滚动到的位置的偏移量即可。

此外，还可以在点击侧边栏的商品项时，将点击的商品项的索引传递给商品栏，用来控制商品栏中对应项的样式变化。可以使用wx:if或wx:show来控制相应商品项的显示与隐藏，并给对应的商品项添加不同的样式。

通过以上的代码实现，可以实现微信小程序侧边栏和商品栏的联动效果。用户在侧边栏选择不同的商品项时，商品栏会相应地滚动到对应的位置，并且高亮显示当前选中的商品项。这样可以提升用户体验，使得用户能够快速地浏览和选择商品。