微信小程序左右商品列表不互动

商品列表左右栏不对应所有商品全部对应一个菜单

<!--index.wxml-->
<view class="container">
  <view class="aside">
    <view class="{{tabIndex === index ? 'menu active' : 'menu'}}" wx:for="{{menus}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap='tabMenu'>{{item.menu}}
    </view>
  </view>

  <view class="item-content">
    <view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
      <view class="item" wx:for="{{items}}" wx:key="{{item.id}}" >
          <image src="{{item.image}}" mode="aspectFit"></image>
        <text class="title">{{item.title}}</text>
        <text class="price">￥ {{item.price}} 元</text>
        <text class="{{item.active ? 'btn active' : 'btn'}}" bindtap='addOrder' data-id="{{item.id}}" data-index="{{index}}">添加</text>
      </view>
    </view>
  </view>
  <view class="{{bottomFlag ? 'bottom-bar' : 'bottom-bar hidden'}}">
    <view class="count">
        共 <text class="num">{{orderCount.num}} 件</text>     
        合计 <text class="num">{{orderCount.money}} 元</text> 
    </view>
    <!-- <view class="btn">
        <text bindtap='card'>购物车</text>
    </view>  -->
    
    <view class="btn">
  <text bindtap="goToOrderPage">购物车</text>
</view> 
  </view>
</view>
JS文件
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    tabIndex: 0,
    // 统计商品数量和价格
    orderCount: {
      num: 0,
      money: 0
    },
    bottomFlag: false,
    // 提交的订单
    orders: true,
    menus: [{
      id: 1,
      menu: '时令水果'
    }, {
      id: 2,
      menu: '休闲食品'
    }, {
      id: 3,
      menu: '文体玩具'
    }, {
      id: 4,
      menu: '纸品清洁'
    }, {
      id: 5,
      menu: '酒水饮品'
    }, {
      id: 6,
      menu: '乳品烘焙'
    }, {
      id: 7,
      menu: '加热即食'
    },{
      id:8,
      menu:'特价推荐'
    }
  ],
  
    // 商品列表
    items: [{
      id: 1,
      title: '澳柑',
      price: 8,
      active: false,
      num: 1,
      image: '/images/1.png'
}, {
      id: 1,
      title: '云南蜜桔',
      price: 13,
      active: false,
      num: 1,
      image: '/images/2.png'
    }, {
      id: 1,
      title: '柠檬',
      price: 14,
      active: false,
      num: 1,
      image: '/images/3.png'
    }, {
      id: 1,
      title: '蜜柚',
      price: 15,
      active: false,
      num: 1,
      image: '/images/4.png'
    }, {
      id: 1,
      title: '泰国金柚',
      price: 16,
      active: false,
      num: 1,
      image: '/images/5.png'
    }, {
      id: 1,
      title: '南非小金橘',
      price: 17,
      active: false,
      num: 1,
      image: '/images/6.png'
    }, {
      id: 6,
      title: '伊利咖啡雪糕',
      price: 18,
      active: false,
      num: 1,
      image: '/images/7.png'
    },
    {
      id: 6,
      title: '鲜奶提子雪糕',
      price: 18,
      active: false,
      num: 1,
      image: '/images/8.png'
    },
    {
      id: 2,
      title: '五香花生米',
      price: 18,
      active: false,
      num: 1,
      image: '/images/9.png'
    },
    {
      id: 2,
      title: '薯愿三盒装',
      price: 18,
      active: false,
      num: 1,
      image: '/images/10.png'
    },
    {
      id: 2,
      title: '呀！土豆',
      price: 18,
      active: false,
      num: 1,
      image: '/images/11.png'
    },
    {
      id: 2,
      title: '烤馍锅巴',
      price: 18,
      active: false,
      num: 1,
      image: '/images/12.png'
    },
    {
      id: 4,
      title: '心相印厨房纸巾',
      price: 18,
      active: false,
      num: 1,
      image: '/images/13.png'
    },
    {
      id: 4,
      title: '伊利酸牛奶',
      price: 18,
      active: false,
      num: 1,
      image: '/images/14.png'
    },
    {
      id: 4,
      title: '清风抽纸',
      price: 18,
      active: false,
      num: 1,
      image: '/images/15.png'
    },
    {
      id: 4,
      title: '维达湿纸巾',
      price: 18,
      active: false,
      num: 1,
      image: '/images/16.png'
    },
    {
      id: 5,
      title: '金鱼洗涤灵',
      price: 18,
      active: false,
      num: 1,
      image: '/images/17.png'
    },
    {
      id: 18,
      title: '燕京啤酒',
      price: 18,
      active: false,
      num: 1,
      image: '/images/18.png'
    }
  ]
  },
  // 下拉刷新
  onPullDownRefresh: function () {
    setTimeout(()=>{
      wx.showToast({
        title: '成功加载数据',
        icon: 'success',
        duration: 500
      });
      wx.stopPullDownRefresh()
    }, 500);
  },
  


  tabMenu: function(event) {
    let index = event.target.dataset.index;
    this.setData({
      tabIndex: index
    });
  },

  // 点击去购物车结账
  goToOrderPage: function() {
    let that = this;
    // 判断是否有选中商品
    if (that.data.orderCount.num !== 0) {
      // 跳转到购物车订单也
      wx.redirectTo({
        url: '../order/order'
      });
    } else {
      wx.showToast({
        title: '您未选中任何商品',
        icon: 'none',
        duration: 2000
      })
    }
  },
  addOrder: function(event) {
        let that = this;
        let id = event.target.dataset.id;
        let index = event.target.dataset.index;
        let param = this.data.items[index];
        let subOrders = []; // 购物单列表存储数据
        param.active ? param.active = false : param.active = true;
        // 改变添加按钮的状态
        this.data.items.splice(index, 1, param);
        that.setData({
          items: this.data.items
        });
        // 将已经确定的菜单添加到购物单列表
        this.data.items.forEach(item => {
          if (item.active) {
            subOrders.push(item);
          }
        });
        // 判断底部提交菜单显示隐藏
        if (subOrders.length == 0) {
          that.setData({
            bottomFlag: false
          });
        } else {
          that.setData({
            bottomFlag: true
          });
        }
        let money = 0;
        let num = subOrders.length;
        subOrders.forEach(item => {
          money += item.price; // 总价格求和
        });
        let orderCount = {
          num,
          money
        }
        // 设置显示对应的总数和全部价钱
        this.setData({
          orderCount
        });
        // 将选中的商品存储在本地
        wx.setStorage({
          key: "orders",
          data: subOrders
        });
      },
      onLoad: function() {
    
      }
})

点左边菜单右边要实现过滤的功能的话，items中的商品要增加左边对应的类型数据，看items中的项是没有分类的。比如给items项增加type属性，值为menus中对应的项的id值，如下
index.wxml


<view class="container">
  <view class="aside">
    <view class="{{tabIndex === index ? 'menu active' : 'menu'}}" wx:for="{{menus}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap='tabMenu'>{{item.menu}}
    </view>
  </view>
 
  <view class="item-content">
    <view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
      <view class="item" wx:for="{{results}}" wx:key="{{item.id}}" >
          <image src="{{item.image}}" mode="aspectFit"></image>
        <text class="title">{{item.title}}</text>
        <text class="price">￥ {{item.price}} 元</text>
        <text class="{{item.active ? 'btn active' : 'btn'}}" bindtap='addOrder' data-id="{{item.id}}" data-index="{{index}}">添加</text>
      </view>
    </view>
  </view>
  <view class="{{bottomFlag ? 'bottom-bar' : 'bottom-bar hidden'}}">
    <view class="count">
        共 <text class="num">{{orderCount.num}} 件</text>     
        合计 <text class="num">{{orderCount.money}} 元</text> 
    </view>
    <!-- <view class="btn">
        <text bindtap='card'>购物车</text>
    </view>  -->
    
    <view class="btn">
  <text bindtap="goToOrderPage">购物车</text>
</view> 
  </view>
</view>

index.js

const app = getApp()
 
Page({
  data: {
    tabIndex: 0,
    // 统计商品数量和价格
    orderCount: {
      num: 0,
      money: 0
    },
    bottomFlag: false,
    // 提交的订单
    orders: true,
    menus: [{
      id: 1,
      menu: '时令水果'
    }, {
      id: 2,
      menu: '休闲食品'
    }, {
      id: 3,
      menu: '文体玩具'
    }, {
      id: 4,
      menu: '纸品清洁'
    }, {
      id: 5,
      menu: '酒水饮品'
    }, {
      id: 6,
      menu: '乳品烘焙'
    }, {
      id: 7,
      menu: '加热即食'
    },{
      id:8,
      menu:'特价推荐'
    }
  ],
  //要显示商品列表，注意不能直接遍历items，因为涉及过滤
  results:[],
    // 商品列表
    items: [{
      type:1,
      id: 1,
      title: '澳柑',
      price: 8,
      active: false,
      num: 1,
      image: '/images/1.png'
}, {
  type:1,
      id: 1,
      title: '云南蜜桔',
      price: 13,
      active: false,
      num: 1,
      image: '/images/2.png'
    }, {
      type:1,
      id: 1,
      title: '柠檬',
      price: 14,
      active: false,
      num: 1,
      image: '/images/3.png'
    }, {
      type:1,
      id: 1,
      title: '蜜柚',
      price: 15,
      active: false,
      num: 1,
      image: '/images/4.png'
    }, {
      type:1,
      id: 1,
      title: '泰国金柚',
      price: 16,
      active: false,
      num: 1,
      image: '/images/5.png'
    }, {
      type:1,
      id: 1,
      title: '南非小金橘',
      price: 17,
      active: false,
      num: 1,
      image: '/images/6.png'
    }, {
      type:2,
      id: 6,
      title: '伊利咖啡雪糕',
      price: 18,
      active: false,
      num: 1,
      image: '/images/7.png'
    },
    {
      type:2,
      id: 6,
      title: '鲜奶提子雪糕',
      price: 18,
      active: false,
      num: 1,
      image: '/images/8.png'
    },
    {
      type:2,
      id: 2,
      title: '五香花生米',
      price: 18,
      active: false,
      num: 1,
      image: '/images/9.png'
    },
    {
      type:2,
      id: 2,
      title: '薯愿三盒装',
      price: 18,
      active: false,
      num: 1,
      image: '/images/10.png'
    },
    {
      type:2,
      id: 2,
      title: '呀！土豆',
      price: 18,
      active: false,
      num: 1,
      image: '/images/11.png'
    },
    {
      type:2,
      id: 2,
      title: '烤馍锅巴',
      price: 18,
      active: false,
      num: 1,
      image: '/images/12.png'
    },
    {
      type:4,
      id: 4,
      title: '心相印厨房纸巾',
      price: 18,
      active: false,
      num: 1,
      image: '/images/13.png'
    },
    {
      type:5,
      id: 4,
      title: '伊利酸牛奶',
      price: 18,
      active: false,
      num: 1,
      image: '/images/14.png'
    },
    {
      type:4,
      id: 4,
      title: '清风抽纸',
      price: 18,
      active: false,
      num: 1,
      image: '/images/15.png'
    },
    {
      type:4,
      id: 4,
      title: '维达湿纸巾',
      price: 18,
      active: false,
      num: 1,
      image: '/images/16.png'
    },
    {
      type:4,
      id: 5,
      title: '金鱼洗涤灵',
      price: 18,
      active: false,
      num: 1,
      image: '/images/17.png'
    },
    {
      type:5,
      id: 18,
      title: '燕京啤酒',
      price: 18,
      active: false,
      num: 1,
      image: '/images/18.png'
    }
  ]
  },
  // 下拉刷新
  onPullDownRefresh: function () {
    setTimeout(()=>{
      wx.showToast({
        title: '成功加载数据',
        icon: 'success',
        duration: 500
      });
      wx.stopPullDownRefresh()
    }, 500);
  },
  
 
 
  tabMenu: function(event) {
    let index = event.target.dataset.index;
    this.setData({
      tabIndex: index
    });

    
    var results=this.data.items.filter(i=>i.type==this.data.menus[index].id);
    
    this.setData({results})

  },
 
  // 点击去购物车结账
  goToOrderPage: function() {
    let that = this;
    // 判断是否有选中商品
    if (that.data.orderCount.num !== 0) {
      // 跳转到购物车订单也
      wx.redirectTo({
        url: '../order/order'
      });
    } else {
      wx.showToast({
        title: '您未选中任何商品',
        icon: 'none',
        duration: 2000
      })
    }
  },
  addOrder: function(event) {
        let that = this;
        let id = event.target.dataset.id;
        let index = event.target.dataset.index;
        let param = this.data.items[index];
        let subOrders = []; // 购物单列表存储数据
        param.active ? param.active = false : param.active = true;
        // 改变添加按钮的状态
        this.data.items.splice(index, 1, param);
        that.setData({
          items: this.data.items
        });
        // 将已经确定的菜单添加到购物单列表
        this.data.items.forEach(item => {
          if (item.active) {
            subOrders.push(item);
          }
        });
        // 判断底部提交菜单显示隐藏
        if (subOrders.length == 0) {
          that.setData({
            bottomFlag: false
          });
        } else {
          that.setData({
            bottomFlag: true
          });
        }
        let money = 0;
        let num = subOrders.length;
        subOrders.forEach(item => {
          money += item.price; // 总价格求和
        });
        let orderCount = {
          num,
          money
        }
        // 设置显示对应的总数和全部价钱
        this.setData({
          orderCount
        });
        // 将选中的商品存储在本地
        wx.setStorage({
          key: "orders",
          data: subOrders
        });
      },
      onLoad: function() {

    var results=this.data.items.filter(i=>i.type==this.data.menus[this.data.tabIndex].id);
    
    this.setData({results})
      }
})

【以下回答由 GPT 生成】

问题分析：

根据提供的代码，可以看出问题出现在商品列表的左右两栏中。具体表现为，所有商品都对应一个菜单，不符合预期。根据代码分析，问题出现在菜单的点击事件中。

解决方案：

首先，需要检查数据源是否正确。确保menus和items都是正确的数据源，并且数据格式是一致的。
在index.js或index.json文件中，检查menus和items的数据是否正确。确认每个商品都有对应的菜单。
接下来，需要修改tabMenu函数的逻辑，该函数是菜单点击事件的处理函数。

// index.js
Page({
  data: {
    // ...其他数据
    tabIndex: 0, // 初始化选中的菜单索引，这里默认为第一个菜单
    menus: [
      // 菜单数据
    ],
    items: [
      // 商品数据
    ]
  },
  tabMenu(e) {
    const { index } = e.currentTarget.dataset;
    this.setData({
      tabIndex: index // 更新选中的菜单索引
    });
  },
  // ...其他函数
})

这样，每次点击不同的菜单项时，通过修改tabIndex的值来更新菜单的选中状态。

在index.wxml文件中，修改tabIndex的使用方式。

<!--index.wxml-->
<view class="container">
  <view class="aside">
    <view class="{{tabIndex === index ? 'menu active' : 'menu'}}" wx:for="{{menus}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap="tabMenu">
      {{item.menu}}
    </view>
  </view>

  <view class="item-content">
    <scroll-view class="box active" scroll-y="true">
      <view class="item" wx:for="{{items}}" wx:key="{{item.id}}">
        <image src="{{item.image}}" mode="aspectFit"></image>
        <text class="title">{{item.title}}</text>
        <text class="price">

在菜单项的class属性中，使用表达式{{tabIndex === index ? 'menu active' : 'menu'}}来动态设置菜单的样式。如果当前菜单索引与tabIndex相等，表示该菜单被选中，添加active样式，否则只使用menu样式。

重新运行小程序，点击不同的菜单项，检查是否能正确显示对应的商品列表。

请注意，在没有提供完整的代码和数据源的情况下，以上解决方案只是基于问题描述给出的一般性建议。如果问题依然存在，请提供更多的代码和数据细节，以便进一步分析和解决问题。

【相关推荐】

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7448190
你也可以参考下这篇文章：微信小程序同一页面多个视频只让选中的这个播放其他都暂停只播放一个视频
您还可以看一下田德华老师的小程序·云开发实战微信朋友圈所有功能课程中的构建评论列表布局小节, 巩固相关知识点
除此之外, 这篇博客: 微信小程序中针对微信基础库新旧不同版本获取用户手机号的方法中的 4.平台差异说明，真机预览如下，会提示你的小程序名称申请，微信开发者工具中预览效果有所不一样，只要能调用成功即可。 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^