小程序购物车点击不同的商品数量进行加减 前端代码

你好，以下是一个简单的小程序购物车加减商品数量的前端代码：

wxml 文件：

<view class="cart-item">
  <view class="cart-item-left">
    <image class="cart-item-img" src="{{ item.imageUrl }}"></image>
    <view class="cart-item-info">
      <view class="cart-item-title">{{ item.title }}</view>
      <view class="cart-item-price">{{ item.price }}</view>
    </view>
  </view>
  <view class="cart-item-right">
    <view class="cart-item-count">
      <image class="cart-item-count-btn" src="../../images/minus.png" bindtap="minusCount"></image>
      <input class="cart-item-count-input" type="number" value="{{ item.count }}" bindinput="changeCount"></input>
      <image class="cart-item-count-btn" src="../../images/plus.png" bindtap="plusCount"></image>
    </view>
  </view>
</view>

js 文件：

Page({
  data: {
    cartList: [ // 购物车商品列表
      {
        id: 1,
        title: '商品1',
        imageUrl: '../../images/product1.png',
        price: '10.00',
        count: 1
      },
      {
        id: 2,
        title: '商品2',
        imageUrl: '../../images/product2.png',
        price: '20.00',
        count: 2
      }
    ]
  },

  // 减少商品数量
  minusCount: function(e) {
    var index = e.currentTarget.dataset.index;
    var count = this.data.cartList[index].count;
    if (count > 1) {
      this.data.cartList[index].count = count - 1;
      this.setData({
        cartList: this.data.cartList
      });
    }
  },

  // 增加商品数量
  plusCount: function(e) {
    var index = e.currentTarget.dataset.index;
    var count = this.data.cartList[index].count;
    this.data.cartList[index].count = count + 1;
    this.setData({
      cartList: this.data.cartList
    });
  },

  // 更改商品数量
  changeCount: function(e) {
    var index = e.currentTarget.dataset.index;
    var count = parseInt(e.detail.value);
    if (count > 0) {
      this.data.cartList[index].count = count;
      this.setData({
        cartList: this.data.cartList
      });
    }
  }
})

在这个例子中，我们通过 `cartList` 数组来存储购物车商品列表，每个商品都包含 `id`、`title`、`imageUrl`、`price` 和 `count` 属性。在 wxml 文件中，我们通过 `bindtap` 和 `bindinput` 来绑定商品数量减少、增加和更改事件，并在对应的 js 函数中实现对 `cartList` 数据的修改和更新。

希望这个例子可以帮到你！