成品展示
由于实在找不到适合直接导入微信小程序数据库的文件,我就自己动手经过程序修改,生成了可直接导入云数据库的文件,顺手整理了一些地址文件
自定义组件形式(链接中没有)
<view class="area2-select-wrap {{showArea?'show':''}}">
<!-- 遮罩层,点击到就关掉弹出层 -->
<view class="area2-select-mask" bindtouchend="areaClose"></view>
<!-- 地址选择器 由上往下分层 -->
<view class="area2-select-inner">
<!-- 第一层,关闭图标 和 标题:选择地点 -->
<view class="area2-select-header">
<view class="area2-close-wrap" bindtap="areaClose">
<image class="area2-close-icon" src="../../images/area_close.png"></image>
</view>
<view>选择地点</view>
</view>
<!-- 第二层,小标题,所选择的 省 市 区 镇 村 -->
<view class="area2-sub-header" >
<!-- 省级选项头 出现条件:无 -->
<view wx:if="{{provinceList.length && curr_pro}}" class="area2-sub-item {{currentTab==1?'on':''}}" data-current="1" bindtap="tiao"><text>{{curr_pro}}</text></view>
<!-- 市级选项头 出现条件:市数组已确定 -->
<view wx:if="{{cityList.length && curr_cit}}" class="area2-sub-item {{currentTab==2?'on':''}}" data-current="2" bindtap="tiao"><text>{{curr_cit}}</text></view>
<!-- 区级选项头 出现条件:区数组已确定 -->
<view wx:if="{{countryList.length && curr_cou}}" class="area2-sub-item {{currentTab==3?'on':''}}" data-current="3" bindtap="tiao"><text>{{curr_cou}}</text></view>
<!-- 镇级选项头 出现条件:镇数组已确定 -->
<view wx:if="{{streetList.length && curr_str}}" class="area2-sub-item {{currentTab==4?'on':''}}" data-current="4" bindtap="tiao"><text>{{curr_str}}</text></view>
<!-- 村级选项头 出现条件:村数组已确定 -->
<view wx:if="{{villageList.length && curr_vil}}" class="area2-sub-item {{currentTab==5?'on':''}}" data-current="5" bindtap="tiao"><text>{{curr_vil}}</text></view>
</view>
<!-- 第三层 -->
<view class="area2-item-wrap">
<!-- 滑块容器 -->
<swiper current="{{currentTab-1}}" class="area2-swiper-box" duration="300" bindchange="bindChange">
<!-- 省滑块 存在条件:省数组确定 -->
<block wx:if="{{provinceList.length && curr_pro}}">
<swiper-item wx:if="{{provinceList.length}}">
<scroll-view scroll-y="true" style="height:100%">
<view class="area2-swiper-inner">
<!-- 遍历渲染省数组 绑定了点击事件selectResideprovince -->
<view bindtap="selectResideprovince" data-code="{{item.code}}" data-name="{{item.name}}" class="area2-swiper-item {{item.name==curr_pro?'on':''}}" wx:for="{{provinceList}}" wx:key="code">
<view class="area2-swiper-areaname">{{item.name}}</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
<!-- 市滑块 存在条件:市数组确定 -->
<block wx:if="{{cityList.length && curr_cit}}">
<swiper-item wx:if="{{cityList.length}}">
<scroll-view scroll-y="true" style="height:100%">
<view class="area2-swiper-inner">
<!-- 遍历渲染市数组 绑定了点击事件selectResidecity -->
<view bindtap="selectResidecity" data-name="{{item.name}}" data-code="{{item.code}}"class="area2-swiper-item {{item.name==curr_cit?'on':''}}"
wx:for="{{cityList}}" wx:key="name">
<view class="area2-swiper-areaname">{{item.name}}</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
<!-- 区滑块 存在条件:区数组确定 -->
<block wx:if="{{countryList.length && curr_cou}}">
<swiper-item wx:if="{{countryList.length}}">
<scroll-view scroll-y="true" style="height:100%">
<view class="area2-swiper-inner">
<!-- 遍历渲染区数组 绑定点击事件selectCountry -->
<view bindtap="selectCountry" data-name="{{item.name}}" data-code="{{item.code}}"class="area2-swiper-item {{item.name==curr_cou?'on':''}}"
wx:for="{{countryList}}" wx:key="name">
<view class="area2-swiper-areaname">{{item.name}}</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
<!-- 镇滑块 存在条件:镇数组确定 -->
<block wx:if="{{streetList.length && curr_str}}">
<swiper-item wx:if="{{streetList.length}}">
<scroll-view scroll-y="true" style="height:100%">
<view class="area2-swiper-inner">
<!-- 遍历渲染市数组 绑定了点击事件selectStreet -->
<view bindtap="selectStreet" data-name="{{item.name}}" data-code="{{item.code}}"class="area2-swiper-item {{item.name==curr_str?'on':''}}"
wx:for="{{streetList}}" wx:key="name">
<view class="area2-swiper-areaname">{{item.name}}</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
<!-- 村滑块 存在条件:村数组确定 -->
<block wx:if="{{villageList.length && curr_vil}}">
<swiper-item wx:if="{{villageList.length}}">
<scroll-view scroll-y="true" style="height:100%">
<view class="area2-swiper-inner">
<!-- 遍历渲染村数组 绑定点击事件selectVillage -->
<view bindtap="selectVillage" data-name="{{item.name}}" class="area2-swiper-item {{item.name==curr_vil?'on':''}}"
wx:for="{{villageList}}" wx:key="name">
<view class="area2-swiper-areaname">{{item.name}}</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
const db = wx.cloud.database();
const _ = db.command;
const App = getApp();
Component({
data: {
provinceList:[],
cityList:[],
countryList:[],
streetList:[],
villageList:[],
curr_pro:'',
curr_cit:'',
curr_cou:'',
curr_str:'',
curr_vil:'',
currentTab: 1,
},
properties: {
address:{
type: Object
},
showArea:{
type:Boolean,
value: false
}
},
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
this.choosearea();
},
},
methods: {
//打开地点选择器
choosearea:async function () {
this.getProvinceList();
this.setData({
currentTab:1,//赋值当前地址栏
//赋值地址栏头
curr_pro: '请选择',
curr_cit: '请选择',
curr_cou:'请选择',
curr_str:'请选择',
curr_vil:'请选择',
});
},
//从数据库集合address获取省数据
getProvinceList(){
console.log('地址选择器初始化');
db.collection('address')
.where({_id:"省级"})
.get()
.then((res)=>{
this.setData({provinceList : res.data[0].provinceList })
})
},
//点击选择省
selectResideprovince: async function (e) {
let code = e.currentTarget.dataset.code;
let name = e.currentTarget.dataset.name;
if(name === this.data.curr_pro) return;
let cityList = [];
let country = [];
let streetList = [];
let villageList = [];
//生成市数组
db.collection('address')
.where({_id:"市级"})
.get()
.then((res)=>{
cityList = (res.data[0])[code];
this.setData({
currentTab:2,
cityList: cityList,
countryList:country,
streetList:streetList,
villageList:villageList,
curr_pro:name,
curr_cit:'请选择',
curr_cou:'请选择',
curr_str:'请选择',
curr_vil:'请选择'
})
});
},
//点击选择市
selectResidecity:function (e) {
let name = e.currentTarget.dataset.name;
let code = e.currentTarget.dataset.code;
if( name === this.data.curr_cit )return;
//生成区数组
db.collection("address")
.where({
_id:"区级"
})
.get()
.then((res)=>{
var countryList = (res.data[0])[code];
this.setData({
currentTab:3,
countryList: countryList,
streetList:[],
villageList:[],
curr_cit:name,
curr_cou:'请选择',
curr_str:'请选择',
curr_vil:'请选择'
});
})
},
//点击选择区
selectCountry:function (e) {
let name = e.currentTarget.dataset.name;
let code = e.currentTarget.dataset.code;
if(name===this.data.curr_cou)return;
//生成镇数组
db.collection("address")
.where({
_id:code
})
.get()
.then((res)=>{
var streetList = res.data[0].streetList;
this.setData({
currentTab:4,
streetList: streetList,
villageList: [],
curr_cou: name,
curr_str:'请选择',
curr_vil:'请选择'
});
})
},
//点击选择镇
selectStreet(e){
let name = e.currentTarget.dataset.name;
let code = e.currentTarget.dataset.code;
if(name===this.data.curr_str)return;
//生成街数组
db.collection("address")
.where({
_id:code
})
.get()
.then((res)=>{
var villageList = res.data[0].vlliageList;
this.setData({
currentTab:5,
villageList: villageList,
curr_str: name,
curr_vil:'请选择'
});
})
},
//点击选择村
async selectVillage(e){
let name = e.currentTarget.dataset.name;
if(name===this.data.curr_vil)return;
var address = {
province: this.data.curr_pro,
city: this.data.curr_cit,
country: this.data.curr_cou,
street: this.data.curr_str,
village: name
}
this.setData({
currentTab:5,
curr_vil: name,
//showArea:false
})
//this.triggerEvent('changeAddress',{address:address})
},
// 滑动切换tab
bindChange: function( e ) {
var that = this;
var t = this.data.currentTab;
that.setData({
currentTab: e.detail.current + 1
},()=>{
if(this.data.currentTab!=t) console.log('左右滑动导致滑块改变')
});
},
//隐藏弹出层
areaClose:async function () {
var obj={};
if(this.data.curr_pro !=="请选择")obj.province=this.data.curr_pro;
if(this.data.curr_cit !=="请选择")obj.city=this.data.curr_cit;
if(this.data.curr_cou !=="请选择")obj.country=this.data.curr_cou;
if(this.data.curr_str !=="请选择")obj.street=this.data.curr_str;
if(this.data.curr_vil !=="请选择")obj.village=this.data.curr_vil;
if( Object.keys(obj).length < 5 ){
//console.log('Address1');
return this.setData({showArea:false});
}else if(JSON.stringify(obj)!=JSON.stringify(this.data.address)){
//console.log('Address2');
this.setData({
showArea:false,
address:obj,
});
this.triggerEvent('changeAddress',{address:obj})
}else{
return this.setData({showArea:false});
}
},
//点击选项卡
tiao(e){
var c = parseInt(e.currentTarget.dataset.current);
this.setData({currentTab : c})
}
},
});
下面是包含了五级地址器DEMO和各类地址文件的链接
https://gitee.com/YYCCbigbig/five-level-address-selector.git