効果

ミニプログラムで 3 レベルのセレクターコンポーネントを実装するにはどうすればよいですか? (コード例)

実装プロセス

<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=&#39;words&#39;>
        <!-- {{multiArray[2][multiIndex[2]]}} -->
        {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}      </view>
      <image src=&#39;/image/right.png&#39;></image>  
    </view> 
    </picker>
  </view>

ログイン後にコピー

ミニプログラムの既存のピッカーコンポーネントに mode="multiSelector" を設定して、複数列セレクターにします。 mode="multiSelector"，使之成为多列选择器。

在多列选择器中有两个重要的参数：

properties: {
    multiArray: Array,
    multiIndex: Array
  }

ログイン後にコピー

multiArray是一个二维数组，存放选择器每一列上的选项列表。multiIndex是一个一维数组，存放每一列被选中的值，例：[0,0,0]

複数列セレクターには 2 つの重要なパラメーターがあります:

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

ログイン後にコピー

multiArray は、セレクターの各列のオプションのリストを格納する 2 次元配列です。 multiIndex は、各列の選択された値を格納する 1 次元配列です。たとえば、[0,0,0] は、0 番目のオプションが最初の列で選択されていることを意味します。 2 番目の列のオプションでも選択されます。どちらのパラメーターも、3 列セレクターを使用してページから渡されます。

bindPickerChange イベントと columnchange イベントをミニプログラムの既存のピッカーコンポーネントにバインドすると、ユーザーがセレクターのオプション値を決定するか、列のオプション値を変更すると、これら 2 つのイベントがそれぞれトリガーされます:

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

ログイン後にコピー

Set multiSelectorValue イベントと multiSelectorColumn イベントを使用すると、3 列セレクターを使用するページでセレクターオプション値の変更をキャプチャできるようになります。

v-picker-multiSelector など、3 列セレクターが使用されるページに 3 列セレクターコンポーネントを導入します。

//当用户改变种植区某列选项时触发的事件
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
  }
}

ログイン後にコピー

acceptMultiSelectorValue 関数と acceptMultiSelectorColumn 関数を設定して、オプション値の変更を受け取ります。

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

ログイン後にコピー

3 つの場合列セレクターの列の値が変更されると、ページは変更された列番号 (column) と選択された列の値 (columnValue) をコンポーネントから受け取ります。列を判断し、column=0 の場合は、columnValue の値に基づいて州の都市リストをバックエンドにリクエストし、都市リストの最初の桁に基づいて都市の地区リストをバックエンドにリクエストします。 column=1 の場合、columnValue の値に基づいて都市の地区リストをバックエンドにリクエストします。

rrreee

ユーザーが 3 列セレクターのオプションを決定すると、ページはコンポーネントから multiIndex の値を受け取り、オプションの値を更新します。