微信小程序一个页面多个picker实现

最新推荐文章于 2024-09-21 16:46:41 发布

yangsitong1314

最新推荐文章于 2024-09-21 16:46:41 发布

阅读量7.5k

点赞数 4

本文链接：https://blog.csdn.net/yangsitong1314/article/details/77672415

版权

多个picker 会出现页面联动 index错乱

1.wxml

 <view class="column_list mt_10" wx:for="{{objArray}}" wx:for-item="itm"  wx:for-index="idx" >
        <text class="font15">{{itm.title}} </text>
        <picker  class="inputText"  bindchange="bindChange_select" value="{{itm.index}}" data-current="{{idx}}" range="{{itm.option}}" >
            <view class="select_picker">
                 {{itm.option[itm.index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>

2..js

Page({
  data: {
    //每个对象就是一个选择器，有自己的索引值index，标题title，选项option（又是一个数组）
    objArray: [
      {
        index: 0,
        title: '选项一',
        option: ['1', '2', '3', '4', '5'],
      },
      {
        index: 0,
        title: '选项二',
        option: ['一', '二', '三', '四', '五'],
      },
      {
        index: 0,
        title: '选项三',
        option: ['①', '②', '③', '④', '⑤']
      },
    ]
  },
  //绑定事件，因为不能用this.setData直接设置每个对象的索引值index。
  //所以用自定义属性current来标记每个数组对象的下标
  bindChange_select: function (ev) {
    // 定义一个变量curindex 储存触发事件的数组对象的下标
    const curindex = ev.target.dataset.current
    //根据下标 改变该数组对象中的index值
    this.data.objArray[curindex].index = ev.detail.value
    //把改变某个数组对象index值之后的全新objArray重新 赋值给objArray
    this.setData({
      objArray: this.data.objArray
    })
  }
})