效果：
html:
<div class="address-content">
<ion-col class="col">
<ion-slides class="list" pager="false" [options]="proviceOpt" #provice (ionSlideTouchEnd)= "proviceTouchEnd()">
<ion-slide *ngFor="let item of proviceList">
<div class="new-li">{{item}}</div>
</ion-slide>
</ion-slides>
</ion-col>
<ion-col class="col">
<ion-slides class="list" pager="false" [options]="cityOpt" #city (ionSlideTouchEnd)= "cityTouchEnd()">
<ion-slide *ngFor="let item of cityList">
<div class="new-li">{{item}}</div>
</ion-slide>
</ion-slides>
</ion-col>
<ion-col class="col">
<ion-slides class="list" pager="false" [options]="areaOpt" #area (ionSlideTouchEnd)= "areaTouchEnd()">
<ion-slide *ngFor="let item of areaList">
<div class="new-li">{{item}}</div>
</ion-slide>
</ion-slides>
</ion-col>
</div>
css:
.address-content{
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
color:#333333;
.col{
display: flex;
align-items: center;
overflow: hidden;
padding: rem(8) 0;
.list{
height: rem(35);
line-height: rem(35);
font-size: rem(14);
align-items: center;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
color: #999999;
overflow: initial;
width: 100%;
.new-li{
font-size: rem(14);
}
.swiper-slide-active{
color:#333333;
}
}
}
}
ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import { cityData} from '../../untils/pca.js'; // 引入省市区数据 链接: https://pan.baidu.com/s/1jLaswPqiPkfM7c99XzZbUw 提取码: j8e5
export class ProfileAddressEditPage implements OnInit {
constructor( ) { }
@ViewChild('provice') provice: any;
@ViewChild('city') city: any;
@ViewChild('area') area: any;
cityName:string = '北京市-北京市-东城区'; // 初始化城市名
proviceList = []; // 省列表
cityList = []; // 城市列表
areaList = []; // 地区列表
addressSel = []; // 选中的地址
proviceOpt = {
initialSlide: 0,
speed: 50000000000,
direction: 'vertical',
autoplay: false,
};
cityOpt = {
initialSlide: 0,
direction: 'vertical',
autoplay: false
};
areaOpt = {
initialSlide: 0,
direction: 'vertical',
autoplay: false,
stopPlay:true
};
// 选择省
proviceTouchEnd() {
this.provice.stopAutoplay();
this.provice.getActiveIndex().then(num => {
this.addressSel[0] = this.proviceList[num]
this.addressSel[1] = ''
this.addressSel[2] = ''
this.getCityListByProvice();
})
}
// 选择市
cityTouchEnd() {
this.city.stopAutoplay();
this.city.getActiveIndex().then(num => {
this.addressSel[1] = this.cityList[num]
this.addressSel[2] = ''
this.getAreaListByCity();
})
}
// 选择地区
areaTouchEnd() {
this.area.stopAutoplay();
this.area.getActiveIndex().then(num => {
this.addressSel[2] = this.areaList[num]
})
}
// 根据已选省获取当前城市列表
getCityListByProvice(){
this.cityList = Object.keys(cityData[this.addressSel[0]]);
if(this.addressSel[1] == ''){
this.cityOpt.initialSlide = 0;
this.addressSel[1] = this.cityList[0];
}else{
this.cityList.forEach((item, index) => {
if (item === this.addressSel[1]) {
this.cityOpt.initialSlide = index;
}
});
}
this.getAreaListByCity()
}
// 根据已选城市获取当前地区列表
getAreaListByCity(){
this.areaList = cityData[this.addressSel[0]][this.addressSel[1]]
if(this.addressSel[2] == ''){
this.areaOpt.initialSlide = 0;
this.addressSel[2] = this.areaList[0];
}else{
this.areaList.forEach((item, index) => {
if (item === this.addressSel[2]) {
this.areaOpt.initialSlide = index;
}
});
}
}
ngOnInit() {
this.addressSel = this.cityName.split('-');
this.proviceList = Object.keys(cityData);
this.proviceList.forEach((item, index) => {
if (item === this.addressSel[0]) {
this.proviceOpt.initialSlide = index;
}
});
this.getCityListByProvice();
}
}
