摘要：幾個(gè)主要屬性選取范圍，數(shù)據(jù)類型為，為普通選擇器時(shí)，有效的值表示選擇了中的第幾個(gè)下標(biāo)從開始，數(shù)據(jù)類型肯定是綁定事件，改變時(shí)觸發(fā)事件，。代碼如下選項(xiàng)一選項(xiàng)二選項(xiàng)三一二三四五這樣，一個(gè)頁面使用多個(gè)的問題就解決了。但在發(fā)現(xiàn)小一個(gè)問題。

當(dāng)然先看官方文檔 picker說明搞清楚基本概念
“從底部彈起的滾動(dòng)選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時(shí)間選擇器，日期選擇器，默認(rèn)是普通選擇器?！?br>幾個(gè)主要屬性：
range： 選取范圍，數(shù)據(jù)類型為Array / Object Array，mode為 普通選擇器 時(shí)，range 有效；
value： value 的值表示選擇了 range 中的第幾個(gè)（下標(biāo)從 0 開始），數(shù)據(jù)類型肯定是Number；
bindchange： 綁定事件，value 改變時(shí)觸發(fā) change 事件，event.detail = {value: value}。

今天在同一個(gè)頁面使用多個(gè)普通選擇器遇到了問題，選擇一個(gè)選項(xiàng)，其他選項(xiàng)也跟隨著改變了.
代碼如下:

//picker.wxml：   

        選項(xiàng)一
        
            
                {{option1[index]}}
                
            
        
    
    
        選項(xiàng)二
        
            
                {{option2[index]}}
                
            
        
    
    
        選項(xiàng)三
        
            
                {{option3[index]}}
                
            
        
    

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

因?yàn)槟J(rèn)索引值（也叫“下標(biāo)”）都是index，綁定事件也只是改變了index。所以改變一個(gè)選項(xiàng)，其他選項(xiàng)都跟著改變了。

首先想到的是給三個(gè)選項(xiàng)自定義不同的索引值index1,index2,index3，分別綁定不同的事件bindchange1，bindchange2，bindchange3改變其對(duì)應(yīng)的索引值，互不干擾。
代碼如下：

//picker.wxml： 
 
        選項(xiàng)一
        
            
                {{option1[index1]}}
                
            
        
    
    
        選項(xiàng)二
        
            
                {{option2[index2]}}
                
            
        
    
    
        選項(xiàng)三
        
            
                {{option3[index3]}}
                
            
        
    
    // 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
        })
    }

})

這樣，一個(gè)頁面使用多個(gè)picker的問題就解決了。但在發(fā)現(xiàn)小一個(gè)問題。
搜索到j(luò)iong也提出了這個(gè)問題：
“為什么多個(gè)picker會(huì)出現(xiàn)相互影響的問題？比如在第一個(gè)選擇器選擇了3，剩下的選擇器點(diǎn)進(jìn)去默認(rèn)都是從第3個(gè)開始？”
小程序開發(fā)工具（PC端）中的確存在，也沒有好的解決辦法。
但是，我用手機(jī)親測(cè)不存在這個(gè)問題。新版小程序開發(fā)工具已經(jīng)修復(fù)此Bug

在這里我多次使用了picker，于是我想到了使用循環(huán) wx:for，（以后如果還要用可以做成一個(gè)模板）
那么數(shù)據(jù)就要修改為對(duì)象的數(shù)組（Object Array） ，我理解為json格式（不知道對(duì)不對(duì)）

// picker.js
Page({
    data: {
    //每個(gè)對(duì)象就是一個(gè)選擇器，有自己的索引值index，標(biāo)題title，選項(xiàng)option（又是一個(gè)數(shù)組）
        objArray:[
            {
                index:0,
                title:"選項(xiàng)一",
                option: ["1", "2", "3","4","5"],
            },
            {
                index:0,
                title:"選項(xiàng)二",
                option: ["一", "二", "三","四","五"],
            },
            {
                index:0,
                title:"選項(xiàng)三",
                option: ["①", "②", "③","④","⑤"]
            },
        ]
    },
    // 綁定事件，因?yàn)椴荒苡胻his.setData直接設(shè)置每個(gè)對(duì)象的索引值index。
    // 所以用自定義屬性current來標(biāo)記每個(gè)數(shù)組對(duì)象的下標(biāo)
    bindChange_select: function(ev) {
    // 定義一個(gè)變量curindex 儲(chǔ)存觸發(fā)事件的數(shù)組對(duì)象的下標(biāo)
        const curindex = ev.target.dataset.current
    // 根據(jù)下標(biāo) 改變?cè)摂?shù)組對(duì)象中的index值
        this.data.objArray[curindex].index = ev.detail.value
    // 把改變某個(gè)數(shù)組對(duì)象index值之后的全新objArray重新 賦值給objArray
        this.setData({
            objArray: this.data.objArray
        })
    }
})

wx:for綁定數(shù)組objArray,當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item，為了區(qū)分選項(xiàng)option中的下標(biāo)
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名為itm，
使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名為idx
關(guān)鍵點(diǎn)是：自定義一個(gè)屬性對(duì)應(yīng)當(dāng)前下標(biāo) data-current="{{idx}}"，綁定事件bindChange_select觸發(fā)時(shí)判斷出是哪個(gè)數(shù)組對(duì)象觸發(fā)的，就改變?cè)摂?shù)組對(duì)象中的index值

//picker.wxml：
 
        {{itm.title}} 
        
            
                 {{itm.option[itm.index]}}
                
            
        
    

完整案例