Comment implémenter un composant sélecteur à trois niveaux dans un mini programme ? (exemple de code)

Le contenu de cet article explique comment implémenter un composant sélecteur à trois niveaux dans un mini-programme ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Effet

Processus de mise en œuvre

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

Définir mode="multiSelector" dans le composant sélecteur existant du mini programme, Faites-en un sélecteur multi-colonnes.

Il y a deux paramètres importants dans le sélecteur multi-colonnes :

properties: {
    multiArray: Array,
    multiIndex: Array
  }

multiArray est un tableau bidimensionnel qui stocke la liste des options sur chaque colonne du sélecteur. multiIndex est un tableau unidimensionnel qui stocke la valeur sélectionnée de chaque colonne : [0,0,0] signifie que la 0ème option est sélectionnée dans la première colonne, la 0ème option est également sélectionnée dans la deuxième colonne, et ainsi de suite. Les deux paramètres sont transmis depuis la page à l'aide du sélecteur à trois colonnes.

Liez l'événement bindPickerChange et l'événement columnchange au composant sélecteur existant de l'applet Lorsque l'utilisateur détermine la valeur d'option du sélecteur ou modifie la valeur d'option d'une colonne, ces deux événements seront déclenchés respectivement :

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

Définissez l'événement multiSelectorValue et l'événement multiSelectorColumn pour permettre aux pages utilisant des sélecteurs à trois colonnes de capturer les modifications des valeurs des options du sélecteur.

Introduisez le composant sélecteur à trois colonnes dans la page où le sélecteur à trois colonnes doit être utilisé, tel que v-picker-multiSelector :

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

Recevoir en définissant la fonction recevoirMultiSelectorValue et fonction recevoirMultiSelectorColumn Modifications des valeurs d'option :

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

Lorsqu'une valeur de colonne du sélecteur à trois colonnes change, la page reçoit le numéro de colonne modifié (colonne) et la valeur sélectionnée de la colonne (columnValue) de le composant. Jugez la colonne. Si column=0, demandez la liste des villes de la province au backend en fonction de la valeur de columnValue, et demandez la liste des districts de la ville au backend en fonction du premier chiffre de la liste des villes. Si column=1, demandez le renvoi de la liste des districts de la ville au backend en fonction de la valeur de 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)
    }

Lorsque l'utilisateur détermine l'option du sélecteur à trois colonnes, la page reçoit la valeur de multiIndex du composant et met à jour la valeur de l'option.

Recommandations associées :

Exemple de programme WeChat Mini : code d'implémentation de la fenêtre contextuelle dans le programme WeChat Mini

Comment procéder Saut de page du programme WeChat Mini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!