HarmonyOS鸿蒙Next省市区县四级联动选择器
HarmonyOS鸿蒙Next省市区县四级联动选择器 官方有没有提供省市区县四级联动的选择器,记得之前在文档看见过一个,但今天搜索找不到了,如果没有能否提供一个封装的demo,数据来源是接口查询,所以省、市、区选中后需要回调获取当前区域code并获取下一级区域列表
2 回复
参考以下demo:
@Observed
class StringArray extends Array<String> {
}
const cityData: string[][] = [
['辽宁省', '吉林省', '黑龙江省'],
['沈阳市', '大连市', '长春市'],
['东安区', '西安区', '爱民区'],
['东安区', '西安区', '爱民区'],
['东安区', '西安区', '爱民区']
]
@Entry
@Component
struct TabsExample6 {
private controller: TabsController = new TabsController()
@State titleArray: Array<string> = ['请选择']
@State arr: Array<StringArray> = [];
aboutToAppear(): void {
this.arr.push(['辽宁省', '吉林省', '黑龙江省']);
}
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.arr, (itemArr: StringArray, index: number) => {
TabContent() {
Column() {
ForEach(itemArr, (item: string) => {
ListItem() {
Row(){
Text(item).fontSize(16).width('80%').align(Alignment.Start)
.fontColor(this.titleArray[index] === item ? '#007DFF' : '#182431')
}
}
.width('80%').height(30).onClick(() => {
if (this.titleArray[index] != item) {
this.titleArray[index] = item;
if (index < cityData.length - 1) {
this.titleArray.splice(index + 1)
this.titleArray.push("请选择")
this.arr.splice(index + 1)
this.arr.push(cityData[index + 1])
setTimeout(() => {
this.controller.changeIndex(index + 1)
}, 100);
}
}
})
}, (item: string) => item)
}.height("100%").width("100%")
}
.tabBar(this.titleArray[index])
}, (item: string) => item)
}
.vertical(false)
.scrollable(true)
.barMode(BarMode.Scrollable)
.barHeight(80)
.animationDuration(200)
.onChange((index: number) => {
console.info(index.toString())
})
}
}
}
更多关于HarmonyOS鸿蒙Next省市区县四级联动选择器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
使用官方提供的 textpicker 案例