微信小程序在同一页面出现多个普通选择器怎么区分,有demo代码

看到很多人在问这个问题，我来写一下吧

wxml:

<view class="container log-list">
<!--身份选择1  -->
    <view class="section identity-select">
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
          {{array[index]}}日报
        </view>
      </picker>
    </view>
<!--身份选择2  -->
<view class="section identity-select">
        <picker bindchange="bindPickerChangef" value="{{index1}}" range="{{array}}">
          <view class="picker">
            {{array[index1]}}
          </view>
        </picker>
      </view>
</view>

js:

const util = require('../../utils/util.js')

Page({
  data: {
    primarySize: 'default',
    array: ['夏彤','陈学华','甘广','黄龙流','李昌略','董俊辉','罗景盛','钟敏君','林锐','麦健发','曹兵'],
    objectArray: [
      {
        id: 0,
        name: '夏彤'
      },
      {
        id: 1,
        name: '陈学华'
      },
      {
        id: 2,
        name: '甘广'
      },
      {
        id: 3,
        name: '黄龙流'
      },
      {
        id: 4,
        name: '李昌略'
      },
      {
        id: 5,
        name: '董俊辉 '
      },
      {
        id: 6,
        name: '罗景盛'
      }
      ,
      {
        id: 7,
        name: '钟敏君'
      }
      ,
      {
        id: 8,
        name: '林锐'
      }
      ,
      {
        id: 9,
        name: '麦健发'
      }
      ,
      {
        id: 10,
        name: '曹兵'
      }
    ],
    index: 0,
    index1: 0,
},
//身份选择1
bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', this.data.array[e.detail.value])
    this.setData({
      index: e.detail.value
    })
  },
bindPickerChangef: function (e) {
    console.log('picker发送选择改变，携带值为', this.data.array[e.detail.value])
    this.setData({
      index1: e.detail.value
    })
  }
}

上面要改的地方，也就是多个普通选择器之间的差异就是黑色背景白色的那几个参数，即事件名字，下标：效果如下图

喜欢这个回答可以关注微信公众号，前端周末，分享更多前端，慕课资料。