微信小程序——普通选择器（picker）

最近在看小程序，这个问题应该拖了好久了吧？

就是我在用微信小程序的时候的组件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双括号里面的那个命名，当然你可以对比一下我这三个的那几处不一样，就是需要改变的命名。

这样就可以实现一个页面出现多个普通选择器了。

哪里有不足的地方，大家可以在评论区说出来，我们一起谈论一下，我也是刚开始学习这个的，一起进步！

微信小程序——普通选择器（picker）

猜你喜欢