智联招聘网站怎么做两份简历sem账户托管公司
鸿蒙开发城市联动选择弹框
城市联动选择弹框不容易,在Android那边也是不容易。选择某个省份时,城市要对得上,切换得及时
一、思路:
关键用@Provide和@Consume互相监听对方的变化
二、效果图:
三、视频效果:
鸿蒙Next开发教程实战案例源码分享-城市联动选择弹框
四、关键代码如下:
// 联系:893151960
@Component
export struct ProvinceLevelComponent {@State labelList: string[] = [];@Consume selectProvinceIndex: number ;@Consume currentFirst: string;@Consume dataSource: Array<ProvinceListBean>;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: Array<ProvinceListBean>;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?:Array<ProvinceListBean>
// }
//
// export interface ProvinceListBean{
// province?:string
// cityList?:Array<CityListBean>
// }
//
// export interface CityListBean{
// city?:string
// }onFirstChange() {this.labelList = []let tempList : string[] = []let cityList : Array<CityListBean> = []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源码结构图:
有需要完整源码的可私信我