这里写的暂时不是一个组件，可以当做参考。如果有小伙伴有其他更好的解决方案或者优化地方可以提出来，效果如下：
wxml：
<view class="">
<view class="animation-button" bindtap="translate">地址:{
{
contentadd}}</view>
<view class="float {
{isRuleTrue?'isRuleShow':'isRuleHide'}} ">
<view class="animation-element" animation="{
{animation}}">
<view class='animation-header'>
<view class="left-title">选择地区</view>
<view class="animation-button" catchtap="success">X</view>
</view>
<view class="title">
<view class="area {
{Province ? '':'active'}}" catchtap="provinceSelected">{
{
Province ? Province : '请选择区'}}</view>
<view class="area {
{City ? '':'active'}}" catchtap="citySelected" >{
{
City ? City:'请选择街道'}}</view>
<view class="area {
{District ? '' :'active'}}" catchtap="districtSelected" wx:if="City">{
{
District ? District:'请选择社区'}}</view>
<block wx:if="{
{fourList != null}}">
<view class="area {
{Dischildren ? '' :'active'}}" catchtap="districtSelectedChild" wx:if="District">{
{
Dischildren ? Dischildren:'请选择'}}</view>
</block>
</view>
<view class="isul">
<view class="addList {
{item.selected ? 'active' : ''}}" wx:key="key" wx:for="{
{info}}" catchtap="getProvinceId" wx:if="{
{showProvince}}" data-value="{
{item.value}}" data-label="{
{item.label}}" data-index="{
{index}}">{
{
item.label}}</view>
<view class="addList {
{item.selected ? 'active' : ''}}" wx:key="key" wx:for="{
{showCityList}}" catchtap="getCityId" wx:if="{
{showCity}}" data-value="{
{item.value}}" data-label="{
{item.label}}" data-index="{
{index}}">{
{
item.label}}</view>
<view class="addList {
{item.selected ? 'active' : ''}}" wx:key="key" wx:for="{
{showDistrictList}}" catchtap="getDistrictId" wx:if="{
{showDistrict}}" data-value="{
{item.value}}" data-label="{
{item.label}}" data-index="{
{index}}">{
{
item.label}}</view>
<block wx:if="{
{fourList != null}}">
<view class="addList {
{item.selected ? 'active' : ''}}" wx:key="key" wx:for="{
{showChildrenList}}" catchtap="getChildrenId" wx:if="{
{showChildren}}" data-value="{
{item.value}}" data-label="{
{item.label}}" data-index="{
{index}}">{
{
item.label}}</view>
</block>
</view>
</view>
</view>
</view>
js:（其中的数据就不在这里展示，感兴趣可以去下载https://github.com/myyezi/myapi/blob/master/shuju.js）
var shuju = require('./shuju.js')
Page({
onReady: function () {
this.animation = wx.createAnimation()
},
translate: function () {
this.setData({
isRuleTrue: true
})
// this.animation.translate(0, 0).step()
// this.setData({ animation: this.animation.export() })
},
success: function () {
this.setData({
isRuleTrue: false
})
// this.animation.translate(0, 0).step()
// this.setData({ animation: this.animation.export() })
},
properties: {
data: Object,
},
data: {
showChose: false,
showProvince: true,
showCity: false,
showDistrict: false,
showCityList: false,
showDistrictList: false,
province: 1,
city: 1,
district: 1,
GetProvinceId: 1,
District: false,
Province: false,
City: false,
// v-for循环判断是否为当前
selected: false,
info: shuju
},
ready: function () {
console.log(this.properties.data)
},
choseAdd: function() {
this.setData({
showChose : true
})
},
closeAdd: function() {
this.setData({
showChose : false
})
},
_filter(add,name,code) {
let result = [];
for(let i=0;i<add.length;i++) {
if(code == add[i].value){
result = add[i][name];
}
}
return result;
},
getProvinceId(e) {
var that =this
this.setData({
province : e.currentTarget.dataset.value,
Province : e.currentTarget.dataset.label,
showProvince : false,
showCity : true,
showDistrict : false,
})
let isListCityList = that._filter(this.data.info,'children',this.data.province)
this.setData({
showCityList : isListCityList
})
// 点击选择当前
this.data.info.map( a => a.selected = false );
this.data.info[e.currentTarget.dataset.index].selected = true;
},
provinceSelected: function() {
// 清除市级和区级列表
this.setData({
showCityList : false,
showDistrictList : false
})
// 清除市级和区级选项
this.setData({
City : false,
District : false,
Dischildren: false
})
// 选项页面的切换
this.setData({
showProvince : true,
showCity : false,
showDistrict : false
})
},
getCityId(e) {
console.log(e)
this.setData({
city : e.currentTarget.dataset.value,
City : e.currentTarget.dataset.label,
showProvince : false,
showDistrict : true,
showCity : false,
showChildren :false,
})
let threeLIst = this._filter(this.data.showCityList,'children',this.data.city)
if( threeLIst != []){
this.setData({
showDistrictList :threeLIst
})
}
// 选择当前添加active
this.data.showCityList.map( a => a.selected = false );
this.data.showCityList[e.currentTarget.dataset.index].selected = true;
},
citySelected() {
// 清除市级和区级选项
this.setData({
District : false,
Dischildren: false
})
this.setData({
showProvince : false,
showCity : true,
showDistrict : false
})
},
getDistrictId(e) {
//第三级
this.setData({
district : e.currentTarget.dataset.value,
District : e.currentTarget.dataset.label,
showProvince : false,
showCity : false,
showDistrict : false,
showChildren: true,
})
let fourList = this._filter(this.data.showDistrictList,'children',this.data.district)
this.setData({
fourList
})
if(fourList != []){
if(fourList == null){
this.setData({
contentadd: this.data.info[this.data.province-1].label + this.data.City +this.data.District,
isRuleTrue: false
})
}else{
this.setData({
showChildrenList : fourList
})
}
}
console.log(this.data.showDistrictList)
// 选择当前添加active
this.data.showDistrictList.map( a => a.selected = false );
this.data.showDistrictList[e.currentTarget.dataset.index].selected = true;
},
getChildrenId(e) {
//第四级
this.setData({
dischildren : e.currentTarget.dataset.value,
Dischildren : e.currentTarget.dataset.label,
})
// 选择当前添加active
this.data.showChildrenList.map( a => a.selected = false );
this.data.showChildrenList[e.currentTarget.dataset.index].selected = true;
// 选取第四级选项之后关闭弹层
this.setData({
//this.data.info[this.data.province-1].label + this.data.City + this.data.District +
contentadd: this.data.info[this.data.province-1].label + this.data.City + this.data.District + this.data.Dischildren,
isRuleTrue: false
})
var seleAddressCenter ={
seleAddress : this.data.contentadd,
code : this.data.dischildren
}
this.triggerEvent('myevent', seleAddressCenter) //向父组件传值
},
districtSelected() {
// 清除市级和区级选项
this.setData({
Dischildren: false
})
this.setData({
showProvince : false,
showCity : false,
showDistrict : true,
showChildren: false
})
}
})
wxss:
.isRuleShow {
display: block;
}
.isRuleHide {
display: none;
}
.float {
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
top: 0;
left: 0;
/* margin-top:80rpx; */
}
.iconuse {
margin-left: 11rpx;
}
.iconprice {
margin-left: 11rpx;
}
.animation-reset{
float: left;
line-height: 2;
width: 260rpx;
margin: 15rpx 12rpx;
border: 1px solid #f3f0f0;
text-align: center;
}
.animation-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 20rpx 0rpx 20rpx;
}
.left-title{
font-size: 32rpx;
color: #333;
font-weight: bold;
}
.animation-button{
height: 60rpx;}
.animation-button image{
width: 60rpx;
height: 60rpx;
}
/* */
/* .animation-element {
width: 750rpx;
height: 920rpx;
background-color: #ffffff;
border: 1px solid #f3f0f0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
} */
.animation-element{
position:absolute;
height: 920rpx;
bottom:0;
left:0;
z-index:121;
background:#fff;
width:750rpx;
}
.title h4{
display:inline-block;
margin-left:3.2rem;
font-size:0.32rem;
line-height:0.88rem;
font-weight:normal;
color:#999;
}
.title span{
margin:0.42rem 0 0 2.2rem;
font-size:0.45rem;
line-height:0.34rem;
color:#D8D8D8;
}
.area{
display:inline-block;
font-size:32rpx;
line-height:60rpx;
margin-left:20rpx;
color:#333;
}
.addList{
/* width:100%; */
padding-left: 28rpx;
font-size: 34rpx;
font-weight: bold;
line-height:64rpx;
color:#333;
}
/* 修改的格式 */
.animation-element .isul{
height:100%;
max-height: 722rpx;
overflow:auto;
font-size: 28rpx;
}
/* .animation-element .isul view{
margin-left:5%;
} */
.animation-element .title{
display: flex;
flex-direction: row;
}
.animation-element .title .active{
font-size: 32rpx;
color:#0071B8;
border-bottom:2rpx solid #0071B8;
}
.animation-element .isul .active{
color:#0071B8;
}