How to implement a three-level selector component in a mini program? (code example)

The content of this article is about how to implement a three-level selector component in a small program? (Code sample) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect

Implementation process

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

Set mode=" in the existing picker component of the mini program multiSelector", making it a multi-column selector.

There are two important parameters in the multi-column selector:

properties: {
    multiArray: Array,
    multiIndex: Array
  }

multiArray is a two-dimensional array that stores the option list on each column of the selector. multiIndex is a one-dimensional array that stores the selected value of each column. For example: [0,0,0] means that the 0th option is selected in the first column, and the 0th option is also selected in the second column. options, and so on. Both parameters are passed in from the page using the three-column selector.

Bind the bindPickerChange event and columnchange event to the existing picker component of the applet. When the user determines the option value of the selector or changes the option value of a column, these two events will be triggered respectively:

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

Set the multiSelectorValue event and multiSelectorColumn event to allow pages using three-column selectors to capture changes in selector option values.

Introduce the three-column selector component into the page where the three-column selector is to be used, such as v-picker-multiSelector:

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

Receive the option value by setting the receiveMultiSelectorValue function and receiveMultiSelectorColumn function Changes:

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

When a column value of the three-column selector changes, the page receives the changed column number (column) and the selected value of the column (columnValue) from the component. Judge the column. If column=0, then request the city list of the province back to the backend based on the value of columnValue, and request the city's district list back to the backend based on the first digit in the city list. If column=1, then request back the city's district list to the backend based on the value of 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)
    }

When the user determines the option of the three-column selector, the page receives the value of multiIndex from the component and updates the option value.

Related recommendations:

WeChat Mini Program Example: Implementation Code of Pop-up Window in WeChat Mini Program

How to proceed in WeChat Mini Program Page jump

The above is the detailed content of How to implement a three-level selector component in a mini program? (code example). For more information, please follow other related articles on the PHP Chinese website!