Wie implementiert man eine dreistufige Auswahlkomponente in einem Miniprogramm? (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Implementierung einer dreistufigen Auswahlkomponente in einem Miniprogramm. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.

Effekt

Implementierungsprozess

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

Setzen Sie mode="multiSelector" in der vorhandenen Auswahlkomponente des Miniprogramms ein, um es zu erstellen Werden Sie ein mehrspaltiger Selektor.

Es gibt zwei wichtige Parameter im mehrspaltigen Selektor:

properties: {
    multiArray: Array,
    multiIndex: Array
  }

multiArray ist ein zweidimensionales Array, das die Liste der Optionen in jeder Spalte des Selektors speichert. multiIndex ist ein eindimensionales Array, das den ausgewählten Wert jeder Spalte speichert. Beispiel: [0,0,0] bedeutet, dass die 0. Option in der ersten Spalte ausgewählt ist, die 0. Option ist auch in der zweiten Spalte ausgewählt und so weiter. Beide Parameter werden von der Seite mithilfe des dreispaltigen Selektors übergeben.

Binden Sie das bindPickerChange-Ereignis und das Columnchange-Ereignis an die vorhandene Auswahlkomponente des Applets. Wenn der Benutzer den Optionswert des Selektors bestimmt oder den Optionswert einer Spalte ändert, werden jeweils diese beiden Ereignisse ausgelöst:

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

Legen Sie das Ereignis multiSelectorValue und das Ereignis multiSelectorColumn fest, damit Seiten, die dreispaltige Selektoren verwenden, Änderungen an Selektoroptionswerten erfassen können.

Fügen Sie die dreispaltige Selektorkomponente auf der Seite ein, auf der der dreispaltige Selektor verwendet werden soll, z. B. v-picker-multiSelector:

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

Empfangen Sie den Optionswert, indem Sie den requireMultiSelectorValue festlegen Änderungen an Funktion und Funktion „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
  }
}

Wenn sich ein Spaltenwert des dreispaltigen Selektors ändert, erhält die Seite die geänderte Spaltennummer (column) und den ausgewählten Wert der Spalte (columnValue) von der Komponente. Beurteilen Sie die Spalte. Wenn Spalte=0, dann fordern Sie die Stadtliste der Provinz basierend auf dem Wert von ColumnValue zurück an das Backend an und fordern Sie die Bezirksliste der Stadt basierend auf der ersten Ziffer in der Stadtliste zurück an das Backend an. Wenn Spalte=1, fordern Sie die Bezirksliste der Stadt basierend auf dem Wert von ColumnValue an das Backend zurück.

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

Wenn der Benutzer die Optionen des dreispaltigen Selektors bestimmt, empfängt die Seite den Wert von multiIndex von der Komponente und aktualisiert den Optionswert.

Verwandte Empfehlungen:

Beispiel für das WeChat Mini-Programm: Implementierungscode des Popup-Fensters im WeChat Mini-Programm

So gehen Sie vor Seitensprung zum WeChat Mini-Programm

Das obige ist der detaillierte Inhalt vonWie implementiert man eine dreistufige Auswahlkomponente in einem Miniprogramm? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!