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

この記事の内容は、ミニ プログラムで 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 の値を受け取り、オプションの値を更新します。

関連する推奨事項:

WeChat ミニ プログラムの例: WeChat ミニ プログラムのポップアップ ウィンドウの実装コード

WeChat ミニ プログラムでページをジャンプする方法

🎜🎜🎜

以上がミニ プログラムで 3 レベルのセレクター コンポーネントを実装するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。