微信小程序使用picker組件出現問題怎么解決

本篇內容主要講解“微信小程序使用picker組件出現問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“微信小程序使用picker組件出現問題怎么解決”吧!

一、picker基本概念

先來看一下官方文檔中picker的基本概念：

從底部彈起的滾動選擇器，現支持三種選擇器，通過mode來區分，分別是普通選擇器，時間選擇器，日期選擇器，默認是普通選擇器。

重要屬性

• range： 選取范圍，數據類型為Array / Object Array，mode為 普通選擇器 時，range 有效；

• value： value 的值表示選擇了 range 中的第幾個（下標從 0 開始），數據類型肯定是Number；

• bindchange： 綁定事件，value 改變時觸發 change 事件，event.detail = {value: value}。

• mode：選擇器類型，可以是selector（ 普通選擇器）、multiSelector（多列選擇器）、date（時間選擇器）、time（日期選擇器）、region（省市區選擇器）；

二、遇到的問題

問題說在前面，同一個頁面使用多個普通選擇器遇到了問題，選擇一個選項，其他選項也跟隨著改變了。

代碼如下：

//picker.wxml：   
<view class="column_list" >
        <text class="font15">選項一</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option1}}">
            <view class="select_picker">
                {{option1[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項二</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option2}}">
            <view class="select_picker">
                {{option2[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項三</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option3}}">
            <view class="select_picker">
                {{option3[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>

//picker.js
    Page({
    data: {
        index:0,//設置索引值默認為0
        option1: ['1', '2', '3','4','5'],
        option2: ['一', '二', '三','四','五'],
        option3: ['①', '②', '③','④','⑤'],
    },
    bindchange1:function (e) {
       // console.log('picker發送選擇改變，攜帶值為', e.detail.value)
       // 設置這個攜帶值賦值給索引值index
       // 所以option1 ,option2 ,option3的索引值都是一樣的
        this.setData({
            index: e.detail.value
        })
    }
})

因為默認索引值（也叫“下標”）都是index，綁定事件也只是改變了index。所以改變一個選項，其他選項都跟著改變了。

三、如何解決

首先想到的解決辦法就是自定義不同的索引值index1、index2,、index3，分別綁定不同的時間bindchange1、bindchange2、bindchange3改變其對應的索引值。

代碼如下：

//picker.wxml： 
 <view class="column_list" >
        <text class="font15">選項一</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index1}}" range="{{option1}}">
            <view class="select_picker">
                {{option1[index1]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項二</text>
        <picker class="inputText" bindchange="bindchange2" value="{{index2}}" range="{{option2}}">
            <view class="select_picker">
                {{option2[index2]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項三</text>
        <picker class="inputText" bindchange="bindchange3" value="{{index3}}" range="{{option3}}">
            <view class="select_picker">
                {{option3[index3]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>

    // picker.js
    Page({
    data: {
        index1:0,
        index2:0,
        index3:0,
        option1: ['1', '2', '3','4','5'],
        option2: ['一', '二', '三','四','五'],
        option3: ['①', '②', '③','④','⑤'],
    },
    bindchange1:function (e) {
        this.setData({
            index1: e.detail.value
        })
    },
    bindchange2:function (e) {
        this.setData({
            index2: e.detail.value
        })
    },
    bindchange3:function (e) {
        this.setData({
            index3: e.detail.value
        })
    }
})

這樣一個頁面多個picker的問題就解決了，但是現在又發現了一個新的問題：

為什么多個picker會出現相互影響的問題？比如在第一個選擇器選擇了3，剩下的選擇器點進去默認都是從第3個開始？” 小程序開發工具中的確存在，看了社區的帖子，才知道這個是官方的bug，目前還沒有修復。

四、延伸

在這里使用了多個picker，可以想到使用wx:for循環，那么為了渲染方便，數據就要修改為對象的數組。

// picker.js
Page({
    data: {
    //每個對象就是一個選擇器，有自己的索引值index，標題title，選項option（又是一個數組）
        objArray:[
            {
                index:0,
                title:'選項一',
                option: ['1', '2', '3','4','5'],
            },
            {
                index:0,
                title:'選項二',
                option: ['一', '二', '三','四','五'],
            },
            {
                index:0,
                title:'選項三',
                option: ['①', '②', '③','④','⑤']
            },
        ]
    },
    // 綁定事件，因為不能用this.setData直接設置每個對象的索引值index。
    // 所以用自定義屬性current來標記每個數組對象的下標
    bindChange_select: function(ev) {
    // 定義一個變量curindex 儲存觸發事件的數組對象的下標
        const curindex = ev.target.dataset.current
    // 根據下標 改變該數組對象中的index值
        this.data.objArray[curindex].index = ev.detail.value
    // 把改變某個數組對象index值之后的全新objArray重新 賦值給objArray
        this.setData({
            objArray: this.data.objArray
        })
    }
})

wx:for綁定數組objArray,當前項的下標變量名默認為index，數組當前項的變量名默認為item，為了區分選項option中的下標

使用 wx:for-item 可以指定數組當前元素的變量名為itm，使用 wx:for-index 可以指定數組當前下標的變量名為idx。

關鍵點是：自定義一個屬性對應當前下標 data-current=“{{idx}}”，綁定事件bindChange_select觸發時判斷出是哪個數組對象觸發的，就改變該數組對象中的index值。

//picker.wxml：
 <view class="column_list mt_10" wx:for="{{objArray}}" wx:for-item="itm"  wx:for-index="idx" >
        <text class="font15">{{itm.title}} </text>
        <picker  class="inputText"  bindchange="bindChange_select" value="{{itm.index}}" data-current="{{idx}}" range="{{itm.option}}" >
            <view class="select_picker">
                 {{itm.option[itm.index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>

到此，相信大家對“微信小程序使用picker組件出現問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！