picker小程序picker组件里面同时有几个选择器怎么设置才能不相互影响

最新推荐文章于 2025-06-29 09:10:28 发布

南城夏季

最新推荐文章于 2025-06-29 09:10:28 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序前端 picker

本文链接：https://blog.youkuaiyun.com/weixin_39818813/article/details/80548931

小程序专栏收录该内容

21 篇文章

订阅专栏

本文记录了使用picker组件时遇到的选择器联动问题及其解决方案。通过调整参数，可以避免多个选择器之间的非预期联动，确保各自独立工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录下自己使用picker组件遇到的一些小问题，以及自己使用的解决方法，

这个方法应该不是唯一，大家有更好的方法也可以提出来一起参考下。

如果有多个选择器的话，而且没有改相应的一直参数，当你选择第一个选择器的第n个值的时候

就会同时控制另外一个选择器的第n个值被选中，这就不能被我们正常使用了，下面说下要改的参数：

红色的是修改的，具体每个对应什么，大家看一下官方文档picker组件就清楚了。

wxml：

    <!--部门选择  -->
    <view class="section department-select">
      <picker bindchange="bindPickerChange1" value="{{bindex}}" range="{{departmentArray}}">
        <view class="picker">
          {{departmentArray[bindex]}}
        </view>
      </picker>
    </view>

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

js:

 data: {
    array: ['夏彤','陈学华','甘广','黄龙流','李昌略','董俊辉','罗景盛','钟敏君','林锐','麦健发','曹兵'],
    objectArray: [
      {
        id: 0,
        name: '夏彤'
      },
      {
        id: 1,
        name: '陈学华'
      },
      {
        id: 2,
        name: '甘广'
      },
   index:0,

departmentArray: ['营销三部', '营销一部', '营销二部', '营销四部'],
    objectdepartmentArray: [
      {
        id: 0,
        name: '营销三部'
      },
      {
        id: 1,
        name: '营销一部'
      },
      {
        id: 2,
        name: '营销二部'
      },
      {
        id: 3,
        name: '营销四部'
      }
    ],
    bindex: 0,

bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', this.data.array[e.detail.value])
    this.setData({
      index: e.detail.value
    })
  },
  bindPickerChange1: function (e) {
    console.log('picker发送选择改变，携带值为', this.data.departmentArray[e.detail.value])
    this.setData({
      bindex: e.detail.value
    })

  },

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