微信小程序列表的事件绑定-进阶

需求: 小程序列表中有一按钮, 按下后对列表中某项值进行改变

即, 按下按钮后要获取按钮所在行的索引值( 所在行行数 ), 通过该值获取同行别的元素的参数

具体需求分析

我的小程序截图 当按下 + 或 - 对应行的数量加或减1, 所以需要统一的 'id' 来标识每一行.

具体实现

在官网上查到, 可以用 wx:for-index=”index”, 同时用一个参数 id=”“ 来传这个参数 来为列表绑定下标. 见以下代码第一行. 再给这个列表绑定一个事件 tap_main. 每当触碰到列表, 返回的数据都会带 id, 这就是我想要的 “行数”.

<view wx:for="{{arrayGood}}" wx:for-index="index" id="{{index}}" class="main_lists_item" wx:key="good_name" bindtap="tap_main">
  <view data-name="{{item.good_name}}" class="main_lists_name">{{item.good_name}}</view>
  <view data-name="{{item.unit}}" class="main_lists_unit">{{item.unit}}</view>
  <view class="main_lists_num">
    <input data-name="{{item.num}}"
      type="text"
      class="item_num"
      value="{{item.num}}"></input>
    <image src="/src/img/add.png"
      style="width: 40rpx; height: 40rpx" 
      bindtap="tap_add"
      class="item_as"></image>
    <image src="/src/img/sub.png" 
      style="width: 40rpx; height: 40rpx"
      bindtap="tap_sub"
      class="item_as"></image>
    </view>
</view>

//数组结构
arrayGood: [{
  good_name: 'good1',
  unit: '克',
  num: 0,
  index: 1,
},{
  good_name: 'good2',
  unit: '米',
  num: 1,
  index: 2,
},{
  good_name: 'good3',
  unit: '千克',
  num: 0.01,
  index: 3,
}],

//监听函数
tap_main: function(res){
    console.log(res)
},

wxml, js 代码  点击事件获取到的数据 可见获取到的 id 在 res.currentTarget.dataset.id 中.

通过这个 id 就可以来操作数组中对应位置的值了.