在u
View2.x版本中，Picker组件的使用方式与1.x版本略有不同。下面是一个五级选择器的示例代码：
```html
<template>
<
view class="picker">
<picker :columns="columns" @change="onChange"></picker>
</
view>
</template>
<script>
export default {
data() {
return {
columns: [
{
values: ['省份1', '省份2', '省份3'],
defaultIndex: 0,
onChange: (value, index) => {
// 省份变化时更新城市列表
const cityValues = this.getCityList(index)
this.$set(this.columns, 1, {
values: cityValues,
defaultIndex: 0
})
// 重置下级选项
this.$set(this.columns, 2, { values: [], defaultIndex: 0 })
this.$set(this.columns, 3, { values: [], defaultIndex: 0 })
this.$set(this.columns, 4, { values: [], defaultIndex: 0 })
}
},
{
values: [],
defaultIndex: 0,
onChange: (value, index) => {
// 城市变化时更新区县列表
const districtValues = this.getDistrictList(index)
this.$set(this.columns, 2, {
values: districtValues,
defaultIndex: 0
})
// 重置下级选项
this.$set(this.columns, 3, { values: [], defaultIndex: 0 })
this.$set(this.columns, 4, { values: [], defaultIndex: 0 })
}
},
{
values: [],
defaultIndex: 0,
onChange: (value, index) => {
// 区县变化时更新街道列表
const streetValues = this.getStreetList(index)
this.$set(this.columns, 3, {
values: streetValues,
defaultIndex: 0
})
// 重置下级选项
this.$set(this.columns, 4, { values: [], defaultIndex: 0 })
}
},
{
values: [],
defaultIndex: 0,
onChange: (value, index) => {
// 街道变化时更新村庄列表
const villageValues = this.getVillageList(index)
this.$set(this.columns, 4, {
values: villageValues,
defaultIndex: 0
})
}
},
{
values: [],
defaultIndex: 0
}
]
}
},
methods: {
onChange(e) {
// 用户选择最后一个选项时输出最终结果
if (e.detail.column === 4) {
const province = this.columns[0].values[e.detail.value[0]]
const city = this.columns[1].values[e.detail.value[1]]
const district = this.columns[2].values[e.detail.value[2]]
const street = this.columns[3].values[e.detail.value[3]]
const village = this.columns[4].values[e.detail.value[4]]
console.log(`${province}-${city}-${district}-${street}-${village}`)
}
},
getCityList(provinceIndex) {
// 根据省份获取城市列表
// TODO: 根据实际需求替换为异步请求或本地数据
return ['城市1', '城市2', '城市3']
},
getDistrictList(cityIndex) {
// 根据城市获取区县列表
// TODO: 根据实际需求替换为异步请求或本地数据
return ['区县1', '区县2', '区县3']
},
getStreetList(districtIndex) {
// 根据区县获取街道列表
// TODO: 根据实际需求替换为异步请求或本地数据
return ['街道1', '街道2', '街道3']
},
getVillageList(streetIndex) {
// 根据街道获取村庄列表
// TODO: 根据实际需求替换为异步请求或本地数据
return ['村庄1', '村庄2', '村庄3']
}
},
mounted() {
// 初始化省份列表
const provinceValues = this.columns[0].values
this.columns[1].values = this.getCityList(0)
// 初始化城市列表
const cityValues = this.columns[1].values
this.columns[2].values = this.getDistrictList(0)
// 初始化区县列表
const districtValues = this.columns[2].values
this.columns[3].values = this.getStreetList(0)
// 初始化街道列表
const streetValues = this.columns[3].values
this.columns[4].values = this.getVillageList(0)
}
}
</script>
<style>
.picker {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>
```
在上面的代码中，我们使用了一个Picker组件，并在其内部嵌套了多个列，对应省份、城市、区县、街道、村庄五个级别。每当用户选择某个级别的选项时，我们会根据该级别的值更新下一个级别的选项列表。当用户选择最后一个级别时，我们会输出最终的选择结果。
注意，由于u
View2.x版本的Picker组件使用的是小程序原生的picker-
view组件，因此在更新列的值时需要使用`$set`方法。另外，由于Picker组件的默认值是根据各列的`defaultIndex`属性来确定的，因此在更新列的值时也需要更新默认值。
扫一扫
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
