HarmonyOS Next 省市区级联(三级联动)筛选框

效果图

完整代码

• 实例对象
  

1. export class ProvinceBean {
2.   id?: string
3.   pid?: string
4.   isSelect?: boolean
5.   deep?: object
6.   extName?: string
7.   children?: ProvinceBean[]
8. }

复制代码

• 级联代码
  

1. import { MMKV } from '@tencent/mmkv/src/main/ets/utils/MMKV'
2. import { ProvinceBean } from '../../../../bean/ProvinceBean'
3. import { MMKVHelp } from '../../../../util/MMKVHelp'
5. interface CascadeInterface {
6.   onClick?: (provinc: ProvinceBean) => void
7.   close?: () => void
8. }
10. @Preview
11. @CustomDialog
12. export struct CascadeDialog {
13.   controller: CustomDialogController
14.   scrollerOne: Scroller = new Scroller()
15.   scrollerTwo: Scroller = new Scroller()
16.   scrollerThree: Scroller = new Scroller()
17.   callback?: CascadeInterface
18.   @State provinceList: ProvinceBean[] = new Array<ProvinceBean>()
19.   @State cityList: ProvinceBean[] = new Array<ProvinceBean>()
20.   @State areaList: ProvinceBean[] = new Array<ProvinceBean>()
21.   @State selectId: string = ''
22.   // 记录上次选择的数据在列表中的下标，显示数据时，自动滚动到可见位置
23.   @State provinceIndex: number = 0
24.   @State cityIndex: number = 0
25.   @State areaIndex: number = 0
26.   // 跟随父级 改变数据
27.   @Prop provinceItem: ProvinceBean = new ProvinceBean()
28.   // 临时记录省级数据
29.   @State tempProvinceItem: ProvinceBean = new ProvinceBean()
31.   aboutToAppear() {
32.     let data = MMKV.defaultMMKV().decodeString(MMKVHelp.KEY_CITY)
33.     if (data) {
34.       this.selectId = this.provinceItem.id ? this.provinceItem.id : ''
35.       this.provinceList = JSON.parse(data)
36.       if (this.provinceList) {
37.         this.provinceList.forEach((provinceBean, provinceIndex) => {
38.           if (provinceBean.id == this.selectId) {
39.             this.provinceIndex = provinceIndex
40.             // 展开式 同步最新省级临时数据
41.             this.tempProvinceItem = provinceBean
43.             provinceBean.isSelect = true
44.             this.cityList = provinceBean.children ? provinceBean.children : new Array<ProvinceBean>()
45.             /**
46.              * @Desc 一级列表匹配上 2种场景的点击
47.              * 二级列表点击：1.全省 2.直辖市
48.              */
49.             this.cityList[0].isSelect = true
50.           } else {
51.             provinceBean.isSelect = false
52.             provinceBean.children?.forEach((cityBean, cityIndex) => {
53.               if (cityBean.id == this.selectId) {
54.                 this.cityIndex = cityIndex
55.                 this.provinceIndex = provinceIndex
56.                 // 展开时，同步省级对应的数据
57.                 this.tempProvinceItem = provinceBean
59.                 provinceBean.isSelect = true
60.                 cityBean.isSelect = true
61.                 this.cityList = provinceBean.children ? provinceBean.children : new Array<ProvinceBean>()
62.                 this.areaList = cityBean.children ? cityBean.children : new Array<ProvinceBean>()
63.                 /**
64.                  * @Desc 二级列表匹配上 存在4种场景的点击
65.                  * 1.全省 2.直辖市 3.直辖市下的区 4.三级列表的全市（第一条)
66.                  */
67.                 if (cityBean.children && cityBean.children.length > 0) { //第4种场景：
68.                   this.areaList[0].isSelect = true
69.                 } else {
70.                   // 直辖市下的区
71.                   console.log('直辖市下的区' + cityBean.extName)
72.                 }
73.               } else {
74.                 cityBean.isSelect = false
75.                 cityBean.children?.forEach((areaBean, areaIndex) => {
76.                   if (areaBean.id == this.selectId) {
77.                     this.areaIndex = areaIndex
78.                     this.cityIndex = cityIndex
79.                     this.provinceIndex = provinceIndex
80.                     console.log('--22222---' + this.provinceIndex + ' = ' + this.cityIndex + ' = ' + this.cityIndex)
81.                     // 展开时，同步省对应的数据
82.                     this.tempProvinceItem = provinceBean
84.                     areaBean.isSelect = true
85.                     provinceBean.isSelect = true
86.                     cityBean.isSelect = true
87.                     this.cityList = provinceBean.children ? provinceBean.children : new Array<ProvinceBean>()
88.                     this.areaList = cityBean.children ? cityBean.children : new Array<ProvinceBean>()
89.                   } else {
90.                     areaBean.isSelect = false
91.                   }
92.                 })
93.               }
94.             })
95.           }
96.         })
97.       }
98.     }
100.   }
102.   build() {
103.     Column() {
104.       Row() {
105.         List({ scroller: this.scrollerOne }) {
106.           ForEach(this.provinceList, (provinceItem: ProvinceBean, index: number) => {
107.             ListItem() {
108.               Text(provinceItem.extName)
109.                 .width('100%')
110.                 .fontColor(provinceItem.isSelect ? '#007FFF' : '#FF000000')
111.                 .fontSize(12)
112.                 .padding({ left: 10, top: 10, bottom: 10 })
113.             }.onClick(() => {
114.               if (provinceItem.isSelect) {
115.                 console.log('点击的相同地区' + provinceItem.extName)
116.                 return
117.               } else {
118.                 this.cityList.forEach(item => {
119.                   item.isSelect = false
120.                 })
121.                 this.areaList.forEach(item => {
122.                   item.isSelect = false
123.                 })
124.                 this.areaList = new Array<ProvinceBean>()
125.               }
126.               this.tempProvinceItem = provinceItem
127.               this.upProvinceList(provinceItem)
128.               this.cityList = provinceItem.children ? provinceItem.children : new Array<ProvinceBean>()
129.             })
130.           })
131.         }.layoutWeight(1)
132.         .backgroundColor(Color.White)
133.         .height('100%').onSizeChange(() => {
134.           this.scrollerOne.scrollToIndex(this.provinceIndex)
135.         })
138.         List({ scroller: this.scrollerTwo }) {
139.           ForEach(this.cityList, (cityItem: ProvinceBean, KEY) => {
140.             ListItem() {
141.               Text(cityItem.extName)
142.                 .width('100%')
143.                 .fontColor(cityItem.isSelect ? '#007FFF' : '#FF000000')
144.                 .fontSize(12)
145.                 .padding({ left: 10, top: 10, bottom: 10 })
146.             }.onClick(() => {
147.               // cityItem.children ：无数据说明是直辖市/省 ，有数据说明是市下的区
148.               if (cityItem.children && cityItem.children.length > 0) { // 切换省下面的市
149.                 this.upCityList(cityItem)
150.                 if (!cityItem.isSelect) {
151.                   this.areaList.forEach(item => {
152.                     item.isSelect = false
153.                   })
154.                 }
155.                 this.areaList = cityItem.children ? cityItem.children : new Array<ProvinceBean>()
156.               } else {
157.                 //直辖市/省
158.                 this.callback?.onClick!(cityItem)
159.               }
160.             })
161.           })
162.         }.layoutWeight(1).backgroundColor('#F6F6F6').height('100%').onSizeChange(() => {
163.           this.scrollerTwo.scrollToIndex(this.cityIndex)
164.         })
166.         List({ scroller: this.scrollerThree }) {
167.           ForEach(this.areaList, (areaItem: ProvinceBean, KEY) => {
168.             ListItem() {
169.               Text(areaItem.extName)
170.                 .width('100%')
171.                 .fontColor(areaItem.isSelect ? '#007FFF' : '#FF000000')
172.                 .fontSize(12)
173.                 .padding({ left: 10, top: 10, bottom: 10 })
174.             }.onClick(() => {
175.               this.callback?.onClick!(areaItem)
176.             })
177.           })
178.         }.layoutWeight(1).backgroundColor('#F0F0F0').height('100%').onSizeChange(() => {
179.           this.scrollerThree.scrollToIndex(this.areaIndex)
180.         })
181.       }.alignItems(VerticalAlign.Top)
182.       .width('100%')
183.       .height(500)
184.     }.onClick(() => {
185.       this.controller?.close!()
186.     }).backgroundColor("#90000000").height('100%')
187.   }
189.   /**
190.    * @Desc 更新省:自身列表的ui状态
191.    */
192.   private upProvinceList(provinceItem: ProvinceBean) {
193.     let temp = this.provinceList
194.     temp.forEach(item => {
195.       if (provinceItem.id == item.id) {
196.         item.isSelect = true
197.       } else {
198.         item.isSelect = false
199.       }
200.     })
201.     this.provinceList = new Array<ProvinceBean>()
202.     this.provinceList = temp
203.   }
205.   /**
206.    * @Desc 更新城市:自身列表的ui状态
207.    */
208.   private upCityList(itemBean: ProvinceBean) {
209.     let temp = this.cityList
210.     temp.forEach(item => {
211.       if (itemBean.id == item.id) {
212.         item.isSelect = true
213.       } else {
214.         item.isSelect = false
215.       }
216.     })
217.     this.cityList = new Array<ProvinceBean>()
218.     this.cityList = temp
219.   }
220. }

复制代码

• 使用
  

1. @State provinceItem: ProvinceBean = new ProvinceBean()
3. this.controller = new CustomDialogController({
4.       builder: CascadeDialog({
5.         provinceItem: this.provinceItem,
6.         callback: {
7.           onClick: (province: ProvinceBean) => {
8.             console.log(JSON.stringify(province))
9.             this.provinceItem = province
10.             this.controller?.close()
11.           }
12.         }
13.       }),
14.       cancel: () => {
15.         this.controller?.close()
16.       },
17.       offset: { dx: 0, dy: this.postionY },// 弹窗的偏移量
18.       autoCancel: true,
19.       customStyle: true,
20.       maskColor: Color.Transparent,
21.       openAnimation: { duration: 0 },
22.       closeAnimation: { duration: 0 }
23.     });
24.     this.controller.open()

复制代码

• 获取点击组件，组件底部距离屏幕顶部的高度
  

1. .onClick((event: ClickEvent) => {
2.       this.postionY = Number(event.target.area.height) + Number(event.target.area.globalPosition.y)  
3.     })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。