小程序中實現三級選擇器組件的案例

這篇文章給大家分享的是有關小程序中實現三級選擇器組件的案例的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

效果

實現過程

undefined

<view class="section">
    <view class="section__title">{{title}}</view>
    <picker bindchange="bindPickerChange" value="{{multiIndex}}" range="{{multiArray}}" mode="multiSelector" bindcolumnchange="columnchange">
      <view class="picker">  
      <view class='words'>
        <!-- {{multiArray[2][multiIndex[2]]}} -->
        {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}      </view>
      <image src='/image/right.png'></image>  
    </view> 
    </picker>
  </view>

在小程序已有的picker組件中設置mode="multiSelector"，使之成為多列選擇器。

在多列選擇器中有兩個重要的參數：

properties: {
    multiArray: Array,
    multiIndex: Array
  }

multiArray是一個二維數組，存放選擇器每一列上的選項列表。multiIndex是一個一維數組，存放每一列被選中的值，例：[0,0,0] 表示第一列選中了第0個選項，第二列也選中了第0個選項，以此類推。這兩個參數都由用到三列選擇器的頁面傳入。

在小程序已有的picker組件中綁定bindPickerChange事件和columnchange事件，當用戶確定選擇器的選項值或改變某列選項值時會分別觸發這兩個事件：

methods: {    //這個只有在點確定的時候才會觸發
    bindPickerChange: function (e) {
      this.triggerEvent("multiSelectorValue", e.detail)// 更新下標字段
      multiIndex，event.detail = {value: value}
    },
    columnchange: function (e) {
      this.triggerEvent("multiSelectorColumn", e.detail)// detail包含當前改變的列和改變的列的數值，event.detail = {column: column, value: value}
    }
  }

設置multiSelectorValue事件和multiSelectorColumn事件，來讓用到三列選擇器的頁面捕捉到選擇器選項值的改變。

在要用到三列選擇器的頁面里引入三列選擇器組件，比如叫v-picker-multiSelector：

<v-picker-multiSelector multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"  
bind:multiSelectorValue="receiveMultiSelectorValue" bind:multiSelectorColumn="receiveMultiSelectorColumn">
</v-picker-multiSelector>

通過設置receiveMultiSelectorValue函數和receiveMultiSelectorColumn函數來接收選項值的變化：

//當用戶改變種植區某列選項時觸發的事件
receiveMultiSelectorColumn: 
function (e) {
  const column = e.detail.column  
  const columnValue = e.detail.value  
  switch (column) {    
  case 0:      
  this.data.multiIndex[0] = columnValue //更新省值

      this.data.multiArray[1] = this.testGetCity(this.data.provinceList[columnValue]) //獲取市列表
      this.data.cityList = this.data.multiArray[1] //更新市列表
      this.data.multiIndex[1] = 0 // 將市默認選擇第一個

      this.data.multiArray[2] = this.testGetPlantingArea(this.data.cityList[0]) //獲取區列表
      this.data.plantingAreaList = this.data.multiArray[2] //更新種植區列表
      this.data.multiIndex[2] = 0 // 將區默認選擇第一個

      this.setData({
        multiArray: this.data.multiArray,
        multiIndex: this.data.multiIndex
      })      break

    case 1:      this.data.multiIndex[1] = columnValue //更新市值

      //this.data.multiArray[2] = this.getPlantingArea(this.data.cityList[columnValue])//獲取區列表
      this.data.multiArray[2] = this.testGetPlantingArea(this.data.cityList[columnValue]) //測試用,獲取區列表
      this.data.plantingAreaList = this.data.multiArray[2] //更新種植區列表
      this.data.multiIndex[2] = 0 // 將區默認選擇第一個

      this.setData({
        multiArray: this.data.multiArray,
        multiIndex: this.data.multiIndex
      })      break
  }
}

當三列選擇器的某列值改變時，頁面從組件里接收到改變的列數（column）和該列被選擇的值（columnValue）。對column進行判斷，如果column=0，那么根據columnValue的值向后端請求回該省的市列表，并根據市列表的的第一位向后端請求回該市的區列表。如果column=1，那么那么根據columnValue的值向后端請求回該市的區列表。

receiveMultiSelectorValue: function (e) {
      this.setData({
        multiIndex: e.detail.value
      })      this.data.region[0] = this.data.multiArray[0][this.data.multiIndex[0]]      
      this.data.region[1] = this.data.multiArray[1][this.data.multiIndex[1]]      
      this.data.region[2] = this.data.multiArray[2][this.data.multiIndex[2]]      
      this.setData({
        region: this.data.region
      })      //console.log(this.data.region)
    }

當用戶確定三列選擇器的選項時，頁面從組件中接收到multiIndex的值，并對選項值進行更新。

感謝各位的閱讀！關于小程序中實現三級選擇器組件的案例就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！