商业网站设计,惠州中小企业网站制作,福州营销型网站建设价格,搭建网站备案鸿蒙开发城市联动选择弹框
城市联动选择弹框不容易#xff0c;在Android那边也是不容易。选择某个省份时#xff0c;城市要对得上#xff0c;切换得及时
一、思路#xff1a;
关键用Provide和Consume互相监听对方的变化
二、效果图#xff1a; 三、视频效果#xff1…鸿蒙开发城市联动选择弹框
城市联动选择弹框不容易在Android那边也是不容易。选择某个省份时城市要对得上切换得及时
一、思路
关键用Provide和Consume互相监听对方的变化
二、效果图 三、视频效果 鸿蒙Next开发教程实战案例源码分享-城市联动选择弹框 四、关键代码如下
// 联系893151960
Component
export struct ProvinceLevelComponent {State labelList: string[] [];Consume selectProvinceIndex: number ;Consume currentFirst: string;Consume dataSource: ArrayProvinceListBean;aboutToAppear() {for (let i 0; i this.dataSource.length; i) {this.labelList.push(this.dataSource[i].province)if (this.dataSource[i].province this.currentFirst) {this.selectProvinceIndex i;}}this.currentFirst this.dataSource[this.selectProvinceIndex].province}build() {Column() {Column() {if (this.labelList.length 0) {Text(暂无数据).fontSize(20)} else {TextPicker({ range: this.labelList, selected: this.selectProvinceIndex }).onChange((value: string|string[], index: number|number[]) {if (typeof index number) {this.selectProvinceIndex indexthis.currentFirst this.dataSource[index].province}}).selectedTextStyle({color:$r(app.color.color_main)}).canLoop(false)}}.backgroundColor(Color.White).border({ color: #e2e2e2, width: { right: 0.5 }}).width(100%).layoutWeight(1).justifyContent(FlexAlign.Center)}.height(100%)}
}Component
export struct CityLevelComponent {State mTip: string 暂无数据Consume Watch(onFirstChange) currentFirst: string;Consume currentSecond: string;Consume selectProvinceIndex: number;State labelList: string[] [];State select: number 0;Consume dataSource: ArrayProvinceListBean;isIncludeUnlimited:boolean trueaboutToAppear(){this.onFirstChange()}build() {Column() {Column() {if (this.labelList.length 0) {Text(this.mTip).fontSize(20)} else {TextPicker({ range: this.labelList, selected: this.select }).onChange((value: string | string[], index: number | number[]) {if (typeof index number) {this.select indexthis.currentSecond this.labelList[index]}}).selectedTextStyle({color:$r(app.color.color_main)}).canLoop(false)}}.backgroundColor(Color.White).border({color: #e2e2e2,width: { right: 0.5 }}).width(100%).layoutWeight(1).justifyContent(FlexAlign.Center)}.height(100%)}// export interface ProvinceCityAreaDataBean{
// version?:number
// list?:ArrayProvinceListBean
// }
//
// export interface ProvinceListBean{
// province?:string
// cityList?:ArrayCityListBean
// }
//
// export interface CityListBean{
// city?:string
// }onFirstChange() {this.labelList []let tempList : string[] []let cityList : ArrayCityListBean []let json: ProvinceListBean JSON.parse(JSON.stringify(this.dataSource[this.selectProvinceIndex]));cityList json.cityList!if (this.isIncludeUnlimited){if (cityList.length 1) {tempList.push(全省)}}for (let i 0; i cityList.length; i) {tempList.push(cityList[i].city)}this.labelList tempListif (this.isIncludeUnlimited || !this.currentSecond) {this.select 0;this.currentSecond this.labelList[this.select]} else {for (let i 0; i this.labelList.length; i) {if (this.labelList[i] this.currentSecond) {this.select i;this.currentSecond this.labelList[this.select]break}}// 切换了省但是没滑动市if (this.select 0) {this.currentSecond this.labelList[this.select]}}}}五、完整项目demo源码结构图
有需要完整源码的可私信我
