小程序中實(shí)現(xiàn)三級(jí)選擇器組件的案例

這篇文章給大家分享的是有關(guān)小程序中實(shí)現(xiàn)三級(jí)選擇器組件的案例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧。

效果

實(shí)現(xiàn)過程

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組件中設(shè)置mode="multiSelector"，使之成為多列選擇器。

在多列選擇器中有兩個(gè)重要的參數(shù)：

properties: {
    multiArray: Array,
    multiIndex: Array
  }

multiArray是一個(gè)二維數(shù)組，存放選擇器每一列上的選項(xiàng)列表。multiIndex是一個(gè)一維數(shù)組，存放每一列被選中的值，例：[0,0,0] 表示第一列選中了第0個(gè)選項(xiàng)，第二列也選中了第0個(gè)選項(xiàng)，以此類推。這兩個(gè)參數(shù)都由用到三列選擇器的頁(yè)面?zhèn)魅搿?/p>

在小程序已有的picker組件中綁定bindPickerChange事件和columnchange事件，當(dāng)用戶確定選擇器的選項(xiàng)值或改變某列選項(xiàng)值時(shí)會(huì)分別觸發(fā)這兩個(gè)事件：

methods: {    //這個(gè)只有在點(diǎn)確定的時(shí)候才會(huì)觸發(fā)
    bindPickerChange: function (e) {
      this.triggerEvent("multiSelectorValue", e.detail)// 更新下標(biāo)字段
      multiIndex，event.detail = {value: value}
    },
    columnchange: function (e) {
      this.triggerEvent("multiSelectorColumn", e.detail)// detail包含當(dāng)前改變的列和改變的列的數(shù)值，event.detail = {column: column, value: value}
    }
  }

設(shè)置multiSelectorValue事件和multiSelectorColumn事件，來(lái)讓用到三列選擇器的頁(yè)面捕捉到選擇器選項(xiàng)值的改變。

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

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

通過設(shè)置receiveMultiSelectorValue函數(shù)和receiveMultiSelectorColumn函數(shù)來(lái)接收選項(xiàng)值的變化：

//當(dāng)用戶改變種植區(qū)某列選項(xiàng)時(shí)觸發(fā)的事件
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 // 將市默認(rèn)選擇第一個(gè)

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

      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])//獲取區(qū)列表
      this.data.multiArray[2] = this.testGetPlantingArea(this.data.cityList[columnValue]) //測(cè)試用,獲取區(qū)列表
      this.data.plantingAreaList = this.data.multiArray[2] //更新種植區(qū)列表
      this.data.multiIndex[2] = 0 // 將區(qū)默認(rèn)選擇第一個(gè)

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

當(dāng)三列選擇器的某列值改變時(shí)，頁(yè)面從組件里接收到改變的列數(shù)（column）和該列被選擇的值（columnValue）。對(duì)column進(jìn)行判斷，如果column=0，那么根據(jù)columnValue的值向后端請(qǐng)求回該省的市列表，并根據(jù)市列表的的第一位向后端請(qǐng)求回該市的區(qū)列表。如果column=1，那么那么根據(jù)columnValue的值向后端請(qǐng)求回該市的區(qū)列表。

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)
    }

當(dāng)用戶確定三列選擇器的選項(xiàng)時(shí)，頁(yè)面從組件中接收到multiIndex的值，并對(duì)選項(xiàng)值進(jìn)行更新。

感謝各位的閱讀！關(guān)于小程序中實(shí)現(xiàn)三級(jí)選擇器組件的案例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！