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

本文记录了使用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>
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值