五级地址选择器 微信小程序 四级五级各类地址数据文件

成品展示

由于实在找不到适合直接导入微信小程序数据库的文件，我就自己动手经过程序修改，生成了可直接导入云数据库的文件，顺手整理了一些地址文件

自定义组件形式（链接中没有）

<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