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

回到顶部