微信小程序中怎么自定義一個多列選擇器

這篇文章給大家介紹微信小程序中怎么自定義一個多列選擇器，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

在.wxml建一個自定義picker組件：

<picker 
 mode="multiSelector" 
 bindchange="bindCustomPickerChange" 
 bindcolumnchange="bindCustomPickerColumnChange" 
 value="{{customIndex}}" 
 range="{{onlyArray}}"
 >
 <view>
  多列自創選擇器：{{onlyArray[0][customIndex[0]]}}，{{onlyArray[1][customIndex[1]]}}，{{onlyArray[2][customIndex[2]]}}
 </view>
</picker>

要注意的是，此處的onlyArray數組只是當前顯示內容的數組，并不是我們全部數據的數組。

四、自定義函數

寫好組件，我們就來寫js文件，思路如下：

1.先創建頁面所需數據

Page({

 /**
 * 頁面的初始數據
 */
 data: {
 //當前選中數組的下標值
 customIndex: [0, 0, 0],
 //當前選中數組
 onlyArray: [
  [],
  [],
  []
 ],
 //customArray假設為我們從后臺獲取到的json數據
 customArray: [{
  name: '百度',
  dept: [{
   name: '搜索',
   product: [{
    name: '百度搜索'
    },
    {
    name: '百度一下'
    },
   ]
   },
   {
   name: '團購',
   product: [{
    name: '百度糯米'
   }, {
    name: '餓了么'
   }]
   },
   {
   name: '音樂',
   product: [{
    name: '百度音樂'
   }]
   },
   {
   name: '問答社區',
   product: [{
    name: '百度貼吧'
   }]
   }
  ]
  },

  {
  name: '騰訊',
  dept: [{
   name: '社交',
   product: [{
    name: 'QQ'
    },
    {
    name: '微信'
    },
   ]
   },
   {
   name: '視頻',
   product: [{
    name: '騰訊視頻'
    },
    {
    name: '搜狐視頻'
    },
   ]
   },

   {
   name: '短視頻',
   product: [{
    name: '微視'
   }]
   }
  ]
  },
 ],
 },

2.加載頁面時給出賦值函數。

可以看到，當前選中數組onlyArray是空的，在小程序顯示時會直接顯示成空，所以需要在頁面創建時給一個初始值，這個初始值使用customIndex數組來給出，也可以用于頁面數據回填。代碼如下：

 /**
 * 生命周期函數--監聽頁面加載
 */
 onLoad: function(options) {
 var data = {
  customArray: this.data.customArray,
  customIndex: this.data.customIndex,
  onlyArray: this.data.onlyArray,
 };
 for (var i = 0; i < data.customArray.length; i++) {
  data.onlyArray[0].push(data.customArray[i].name);
 }
 for (var j = 0; j < data.customArray[data.customIndex[0]].dept.length; j++) {
  data.onlyArray[1].push(data.customArray[data.customIndex[0]].dept[j].name);
 }
 for (var k = 0; k < data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product.length; k++) {
  data.onlyArray[2].push(data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product[k].name);
 }
 this.setData(data);
 },

3.創建組件監聽函數。

這里需要兩個函數，分別是bindchange(打開組件后點擊確定觸發)和bindcolumnchange（打開組件后滑動列觸發）。

//多列自定義選擇器改變value的方法
 bindCustomPickerChange: function(e) {
 var customArray = this.data.customArray,
  customIndex = this.data.customIndex,
  onlyArray = this.data.onlyArray;

 console.log('picker發送選擇改變，攜帶值為', e.detail.value);
 //此處e.detail.value為當前選擇的列的下標值數組，如[0,1,0]
 
 console.log('picker最終選擇值為：', onlyArray[0][customIndex[0]], onlyArray[1][customIndex[1]], onlyArray[2][customIndex[2]]);
 this.setData({
  customIndex: e.detail.value
 })
 },

 //多列自創選擇器換列方法
 bindCustomPickerColumnChange: function(e) {
 var customArray = this.data.customArray,
  customIndex = this.data.customIndex,
  onlyArray = this.data.onlyArray;

 customIndex[e.detail.column] = e.detail.value;
 // console.log(onlyArray);

 var searchColumn = () => {
  for (var i = 0; i < customArray.length; i++) {
  var arr1 = [];
  var arr2 = [];
  if (i == customIndex[0]) {
   for (var j = 0; j < customArray[i].dept.length; j++) {
   arr1.push(customArray[i].dept[j].name);
   if (j == customIndex[1]) {
    for (var k = 0; k < customArray[i].dept[j].product.length; k++) {
    arr2.push(customArray[i].dept[j].product[k].name);
    }
    onlyArray[2] = arr2;
   }
   }
   onlyArray[1] = arr1;
  }
  };
 }

 switch (e.detail.column) {
  case 0:
  customIndex[1] = 0;
  customIndex[2] = 0;
  searchColumn();
  break;
  case 1:
  customIndex[2] = 0;
  searchColumn();
  break;
 }
 this.setData({
  onlyArray: onlyArray,
  customIndex: customIndex
 });
 },

需要說明的是：

1).bindchange和bindcolumnchange兩個函數都是eventhandle類型的，但他們綁定的數據不同。

• bindchange函數的e.detail.value為當前選擇的所有列的下標值數組，如[0,1,0]代表當前選擇器的三列數據下標；

• bindcolumnchange函數的e.detail.column代表當前選擇的是第幾列，e.detail.value為具體的當前選擇的第幾列的數據的下標，是一個數字。

2).在bindcolumnchange函數中，進行e.detail.column的判斷，

• 如果e.detail.column == 0，則代表改變的是第一列的數據，此時要將第二列和第三列的數據下標全部置為0，即置為缺省數據，并將onlyArray數組進行聯動變化；

• 如果e.detail.column ==1，則代表改變的是第二列的數據，此時將第三列的數據下標置為0，將onlyArray數組進行聯動變化；

• 如果e.detail.column ==2，則代表改變的是第三列的數據，而前兩列不需要進行變化，故不需要判斷這種情況的數組變化。

3).點擊確定后，調用bindchange方法得到選擇結果。我們可以得到的數據包括兩部分，

• 一是當前選擇的所有列的下標值數組，即customIndex，數據回填時即使用這部分數據;

• 二是當前選擇的內容，我們用customIndex中的下標查找onlyArray數組中的具體內容得到具體值，例如 " 百度，搜索，百度一下 "。

關于微信小程序中怎么自定義一個多列選擇器就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。