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

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

// 在侧边栏组件中

// 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()
  }
}

希望这能帮到你!