집 >위챗 애플릿 >미니 프로그램 개발 >미니 프로그램에서 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='words'>
<!-- {{multiArray[2][multiIndex[2]]}} -->
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} </view>
<image src='/image/right.png'></image>
</view>
</picker>
</view>애플릿의 기존 선택기 구성 요소에서 mode="multiSelector"를 설정하여 다중 열 선택기로 만듭니다. mode="multiSelector"，使之成为多列选择器。
在多列选择器中有两个重要的参数：
properties: {
multiArray: Array,
multiIndex: Array
}multiArray是一个二维数组，存放选择器每一列上的选项列表。multiIndex是一个一维数组，存放每一列被选中的值，例：[0,0,0]
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번째 옵션이 선택되었음을 의미합니다. 두 번째 열에서도 선택됩니다. 두 매개변수 모두 3열 선택기를 사용하여 페이지에서 전달됩니다. bindPickerChange 이벤트와 columnchange 이벤트를 미니 프로그램의 기존 선택기 구성 요소에 바인딩합니다. 사용자가 선택기의 옵션 값을 결정하거나 열의 옵션 값을 변경하면 다음 두 이벤트가 각각 트리거됩니다. <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
}
}receiveMultiSelectorValue 함수 및 receiveMultiSelectorColumn 함수를 설정하여 옵션 값의 변경 사항을 수신합니다. 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)을 컴포넌트로부터 받습니다. 컬럼을 판단하여 컬럼이 0이면 컬럼 값을 기준으로 해당 지방의 도시 목록을 백엔드로 요청하고, 도시 목록의 첫 번째 숫자를 기준으로 도시의 구역 목록을 백엔드에 다시 요청합니다. 컬럼=1인 경우, 컬럼 값 값을 기준으로 도시의 구역 목록을 백엔드에 다시 요청합니다. rrreee
사용자가 3열 선택기의 옵션을 결정하면 페이지는 구성 요소로부터 multiIndex 값을 받아 옵션 값을 업데이트합니다.WeChat 미니 프로그램의 예: WeChat 미니 프로그램의 팝업 창 구현 코드
WeChat 미니 프로그램에서 페이지를 이동하는 방법
위 내용은 미니 프로그램에서 3단계 선택기 구성요소를 구현하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!