最近在看小程序,这个问题应该拖了好久了吧?
就是我在用微信小程序的时候的组件picker的普通选择器的时候,一个页面要是一个的话还是没问题的,但是要是多个的话就会出点问题,具体的问题就是我点击第一个的时候会把后面的都选上,这样要是放到项目中是不行的,于是我就找我同学帮我看了一下,才把问题给解决了。
下面是代码:
index.wxml
<view class="item"> <view class="r"> <view class="section"> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> {{array[index]}} <image class="icon" src="{{config.imageUrl}}/images/z-i2.jpg" mode="widthFix" lazy-load="false" binderror="" bindload=""></image> </view> </picker> </view> </view> <view class="l">户型</view> </view> <view class="item"> <view class="r"> <view class="section"> <picker bindchange="bindPickerChange1" value="{{index1}}" range="{{array1}}"> <view class="picker"> {{array1[index1]}} <image class="icon" src="{{config.imageUrl}}/images/z-i2.jpg" mode="widthFix" lazy-load="false" binderror="" bindload=""></image> </view> </picker> </view> </view> <view class="l">朝向</view> </view> <view class="item"> <view class="r"> <view class="section"> <picker bindchange="bindPickerChange2" value="{{index2}}" range="{{array2}}"> <view class="picker"> {{array2[index2]}} <image class="icon" src="{{config.imageUrl}}/images/z-i2.jpg" mode="widthFix" lazy-load="false" binderror="" bindload=""></image> </view> </picker> </view> </view> <view class="l">年代</view> </view>
index.js
array: ['点击选择分类', '两室一厅', '三室一厅', '一室一厅'],
index: 0,
array1: ['点击选择分类', '东', '南', '西', '北'],
index1: 0,
array2: ['时间选择', '东', '222', '西', '北'],
index2: 0,
},
bindPickerChange: function (e) {
console.log('pickerq发送选择改变,携带值0为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindPickerChange1: function (e) {
console.log('pickerw发送选择改变,携带值1为', e.detail.value)
this.setData({
index1: e.detail.value
})
},
bindPickerChange2: function (e) {
console.log('pickere发送选择改变,携带值2为', e.detail.value)
this.setData({
index2: e.detail.value
})
},
下面是截图
其中第一张图和第二张是对应的每个参数对应一个都需要进行改变,一个不一样就出出不来效果,或者报错,今天遇到最大的一个报错就是他一直找不到自己的value值,一直是没有定义,最后发现就事他们对应的值不一样。
图中一个是事件,一个是value值,一个是数组,必须一个对应一个,还有就是如果一个页面出现多个的话,你需要改变事件,value双括号里面的名字,以及range双括号里面的那个命名,当然你可以对比一下我这三个的那几处不一样,就是需要改变的命名。
扫描二维码关注公众号,回复:
10764959 查看本文章
这样就可以实现一个页面出现多个普通选择器了 。
哪里有不足的地方,大家可以在评论区说出来,我们一起谈论一下 ,我也是刚开始学习这个的,一起进步!