1.效果
2.代码—在components中创建CitySelect组件
<template>
<view>
<text class="uni-input" style="
background-color: #F8F8F8;
display: block;
line-height: 76rpx;padding:0 29rpx;" @tap="open">{{value}}</text>
<u-popup :show="integralShow" v-if="integralShow" duration='100' :closeable='true' mode="bottom"
border-radius="20" close-icon="true" @close="closePopup(2)">
<view class="cityselect">
<view class="cityselect-header">
<view class="cityselect-title">
<text>请选择地址</text>
</view>
<view class="cityselect-nav">
<view class="item" v-if="provinceActive" @tap="changeNav(0)">
<text>{{provinceActive.n}}</text>
</view>
<view class="item" v-if="cityActive" @tap="changeNav(1)">
<text>{{cityActive.n}}</text>
</view>
<view class="item" v-if="districtActive" @tap="changeNav(2)">
<text>{{districtActive.n}}</text>
</view>
<view class="item active" v-else>
<text>请选择</text>
</view>
</view>
</view>
<view class="cityselect-content">
<swiper class="swiper" disable-touch="true" touchable="false" :current="current">
<swiper-item>
<scroll-view scroll-y class="cityScroll">
<view>
<view
class="cityselect-item"
v-for="(item,index) in province"
:key="index"
@tap="selectProvince(index)"
>
<view class="cityselect-item-box">
<text>{{item.n}}</text>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y class="cityScroll">
<view>
<view
class="cityselect-item"
v-for="(item,index) in city"
:key="index"
@tap="selectCity(index)"
>
<view class="cityselect-item-box">
<text>{{item.n}}</text>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y class="cityScroll">
<view>
<view
class="cityselect-item"
v-for="(item,index) in district"
:key="index"
@tap="selectDistrict(index)"
>
<view class="cityselect-item-box">
<text>{{item.n}}</text>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</u-popup>
</view>
</template>
<script type="text/babel">
export default {
name: "CitySelect",
components: {
},
props: ["callback", "items", "defaultValue"],
data() {
return {
integralShow:false,
value: "请选择",
show: this.value,
province: [],
provinceActive: null,
city: [],
cityActive: null,
district: [],
districtActive: null,
current: 0
};
},
watch: {
items(nextItem) {
// console.log(nextItem,'1111111111111111111');
this.province = nextItem;
},
defaultValue(nextItem){
// console.log(nextItem,'222222222222222222');
this.value = nextItem;
}
},
mounted() {
// console.log(this.defaultValue,'改变的地址');
if (this.defaultValue) {
this.value = this.defaultValue;
}
this.province = this.items;
},
methods: {
closePopup(){
this.integralShow = false;
},
open() {
this.province = this.items;
this.provinceActive = null;
this.cityActive = null;
this.districtActive = null;
this.city = [];
this.district = [];
this.current = 0;
this.integralShow = true;
// this.$refs.popup.open();
},
changeNav(index) {
if (index == 0) {
this.provinceActive = null;
}
if (index == 1) {
this.cityActive = null;
}
if (index == 2) {
this.districtActive = null;
}
this.current = index;
},
selectProvince(index) {
this.provinceActive = this.province[index];
this.city = this.province[index].c;
this.current = 1;
},
selectCity(index) {
this.cityActive = this.city[index];
this.district = this.city[index].c;
this.current = 2;
},
selectDistrict(index) {
this.districtActive = this.district[index];
this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`;
// this.callback({
// province: {
// id: this.provinceActive.v,
// name: this.provinceActive.n
// },
// city: {
// id: this.cityActive.v,
// name: this.cityActive.n
// },
// district: {
// id: this.districtActive.v,
// name: this.districtActive.n
// }
// });
this.$emit("callback", {
province: {
id: this.provinceActive.v,
name: this.provinceActive.n
},
city: {
id: this.cityActive.v,
name: this.cityActive.n
},
district: {
id: this.districtActive.v,
name: this.districtActive.n
}
});
// this.$refs.popup.close();
this.integralShow = false;
}
}
};
</script>
<style lang="less">
.cityselect {
width: 100%;
height: 75%;
background-color: #fff;
z-index: 1502;
position: relative;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.cityScroll {
height: 100%;
}
.swiper {
height: 800rpx;
}
}
.cityselect-header {
width: 100%;
z-index: 1;
}
.cityselect-title {
width: 100%;
font-size: 30rpx;
text-align: center;
height: 95rpx;
line-height: 95rpx;
position: relative;
&:cityselect-title:after {
height: 1px;
position: absolute;
z-index: 0;
bottom: 0;
left: 0;
content: "";
width: 100%;
background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
}
}
.cityselect-nav {
width: 100%;
padding-left: 20rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
.item {
font-size: 26rpx;
color: #222;
display: block;
height: 80rpx;
line-height: 92rpx;
padding: 0 16rpx;
position: relative;
margin-right: 30rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40%;
&.active {
color: #99CC00 !important;
border-bottom: 1rpx solid #99CC00;
}
}
}
.cityselect-content {
height: 100%;
width: 100%;
}
.cityselect-item {
.cityselect-item-box {
display: block;
padding: 0 40rpx;
position: relative;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
text-overflow: ellipsis;
line-height: 64rpx;
max-height: 65rpx;
font-size: 26rpx;
color: #333;
&:after {
content: "";
height: 1rpx;
position: absolute;
z-index: 0;
bottom: 0;
left: 0;
width: 100%;
background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
}
}
}
</style>
3.在需要的页面调用
<template>
<view>
<view>
<view style="backgroundColor: #F8F8F8;">
<CitySelect ref="cityselect" :defaultValue="model1.qu" @callback="result" :items="district">
</CitySelect>
</view>
</view>
</view>
</template>
<script>
import CitySelect from "@/components/CitySelect";
export default {
components: {
CitySelect
},
data() {
return{
address: {
province: [],
city: [],
district: [],
},
model1: {
realName: '',
phone: '',
qu: '',
stree: '',
detail: '',
isOk: false,
},
district: [{
n: "台湾",
pid: 0,
v: 714401,
c:[{
n: "彰化县",
pid: 714401,
v: 714402,
c:[{
n: "芳苑乡",
pid: 714402,
v: 714403
},{
n: "芬园乡",
pid: 714402,
v: 714632}]
}]
}],
}
},
methods:{
result(values) {
this.address = {
province: values.province.name || "",
city: values.city.name || "",
district: values.district.name || "",
city_id: values.city.id
};
this.model1.qu = `${this.address.province}${this.address.city}${this.address.district}`;
},}
}
</script>
<style lang="scss" scoped>
</style>
