微信小程序——普通選擇器（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雙括號里面的那個命名，當然你可以對比一下我這三個的那幾處不一樣，就是需要改變的命名。

這樣就可以實現一個頁面出現多個普通選擇器了 。

哪里有不足的地方，大家可以在評論區說出來，我們一起談論一下 ，我也是剛開始學習這個的，一起進步！