HarmonyOS 请提供一个三级联动的相关demo

例如:河南省-郑州市-中原区这种三级联动,城市数据有,只需要提供一个类似的demo就可以。

HarmonyOS
2024-10-18 10:27:07
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

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())  
      })  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-18 18:19:14
相关问题
HarmonyOS 需要二级联动demo
170浏览 • 1回复 待解决
HarmonyOS 请提供路由跳转Demo
298浏览 • 1回复 待解决
Image组件是否有三级缓存策略
909浏览 • 1回复 待解决
HarmonyOS能否提供一个NFC识别的demo
247浏览 • 1回复 待解决
请提供HarmonyOS硬编硬解demo
295浏览 • 1回复 待解决
提供一个关于地图组件使用demo
360浏览 • 1回复 待解决
HarmonyOS 如何实现下列功能,请提供demo
311浏览 • 1回复 待解决
HarmonyOS 请提供自定义组件封装demo
285浏览 • 2回复 待解决
能否提供一个关于SM3加密demo
526浏览 • 1回复 待解决
请提供一个简单示例
1881浏览 • 1回复 待解决
需要一个NFC读取demo
303浏览 • 1回复 待解决
HarmonyOS 需要一个筛选页面的demo
223浏览 • 1回复 待解决