微信小程序开发 逐级选择地区

1.需求

  微信小程序开发,逐级选择地区（市、区县、街道、社区、网格），选择每一级然后展示下一级数据。

2. 完整代码

2.1. 选择界面

2.1.1. selectArea.wxml

<text bindtap="selectGrid">{{gridName}}</text>
<!-- 选择地区位置 -->
<view class="area_selection" hidden="{{area_selection}}">
  <view class="communitypop_con">
    <selectionbox id="selectionbox" class="communitypop" bind:cliclCancel="cliclCancel" bind:cliclConfirm="cliclConfirm">
    </selectionbox>
  </view>
</view>

2.1.2. selectArea.wxss

.area_selection {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 800;
}

.communitypop_con {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.communitypop {
  width: 90%;
  height: 80%;
  overflow-y: auto;
  background: white;
  border-radius: 8rpx;
}

2.1.3. selectArea.json

{
  "usingComponents": {
    "selectionbox":"../selectionBox/selectionBox"
  }
}

2.1.4. selectArea.js

// pages/selectArea/selectArea.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    area_selection: true,
    gridName:"请选择"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that = this
    that.selectionbox = that.selectComponent("#selectionbox");

  },

  /**
   * 获取网格
   */
  selectGrid: function () {
    let that = this
    that.selectionbox.getCityData()
    that.setData({
      area_selection: false
    })
  },
  // 地区选择框确定
  cliclConfirm: function (e) {
    let that = this
    var gridObj = e.detail
    that.setData({
      gridName: gridObj.name,
      area_selection: true
    })
  },
  // 地区选择框取消
  cliclCancel: function (e) {
    let that = this
    that.setData({
      area_selection: true
    })
  },
})

2.2. 逐级选择地区弹出框

2.2.1. selectionBox.wxml

<view class="page-body">
  <view class="header-layout">
    <text class="header-title">所在网格：</text>
    <view class="header-content">
      <text >{{cityStr}}</text>
      <text hidden="{{isCountyHidden}}">>{{countyStr}}</text>
      <text hidden="{{isStreetHidden}}">>{{streetStr}}</text>
      <text hidden="{{isCommunityHidden}}">>{{communityStr}}</text>
      <text hidden="{{isGridHidden}}">>{{gridStr}}</text>
    </view>
  </view>
  <!-- 所属市 -->
  <view>
    <view class="item-header-top">所属市: </view>
    <view class="item-layout">
      <view class="item-title {{index+1== cityIndex?'item-title-active':''}}" bindtap="cityClick" wx:for="{{cityList}}" data-index="{{index}}" data-item-id="{{item.id}}" data-value="{{item.name}}" wx:for-index="index" wx:key="index">{{item.name || '暂无'}}</view>
    </view>
  </view>
  <!-- 所属区县 -->
  <view hidden="{{isCountyHidden}}">
    <view class="item-header">所属区县:</view>
    <view class="item-layout">
      <view class="item-title {{index+1== countyIndex?'item-title-active':''}}" bindtap="countyClick" wx:for="{{countyList}}" data-index="{{index}}" data-item-id="{{item.id}}" data-value="{{item.name}}" wx:for-index="index" wx:key="index">{{item.name || '暂无'}}</view>
    </view>
  </view>
  <!-- 所属街镇 -->
  <view hidden="{{isStreetHidden}}">
    <view class="item-header">所属街镇:</view>
    <view class="item-layout">
      <view class="item-title {{index+1== streetIndex?'item-title-active':''}}" bindtap="streetClick" wx:for="{{streetList}}" data-index="{{index}}" data-item-id="{{item.id}}" data-value="{{item.name}}" wx:for-index="index" wx:key="index">{{item.name || '暂无'}}</view>
    </view>
  </view>
  <!-- 所属社区 -->
  <view hidden="{{isCommunityHidden}}">
    <view class="item-header">所属社区:</view>
    <view class="item-layout">
      <view class="item-title {{index+1== communityIndex?'item-title-active':''}}" bindtap="communityClick" wx:for="{{communityList}}" data-index="{{index}}" data-item-id="{{item.id}}" data-value="{{item.name}}" wx:for-index="index" wx:key="index">{{item.name || '暂无'}}</view>
    </view>
  </view>
  <!-- 所属网格 -->
  <view hidden="{{isGridHidden}}">
    <view class="item-header">所属网格:</view>
    <view class="item-layout">
      <view class="item-title {{index+1== gridIndex?'item-title-active':''}}" bindtap="gridClick" wx:for="{{gridList}}" data-index="{{index}}" data-item-id="{{item.id}}" data-value="{{item.name}}" wx:for-index="index" wx:key="index">{{item.name || '暂无'}}</view>
    </view>
  </view>
  <view class="item-interval"></view>
  <view class="opera-layout">
    <text class="opera-item-cancel" bindtap="cliclCancel">取消</text>
    <text class="opera-item-confirm" bindtap="cliclConfirm">确定</text>
  </view>
</view>

2.2.2. selectionBox.wxss

@import "../../public/wxss/base.wxss";

.page-body{
  width: 100%;
  height: 100%;
  border: 1rpx solid white;
  border-radius: 10rpx;
  box-sizing: border-box;
  background-color: white;
}

.header-layout {
  background-color: white;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  position: absolute;
  width: 90%;
  padding: 15rpx 10rpx;
}
.header-title {
  color: #000;
  font-weight: 800;
  font-size: 32rpx;
  margin-top: 10rpx;
}
.header-content {
  display: flex;
  flex-direction: row;
  flex: 1;
  color: #333;
  font-size: 30rpx;
}
.item-title-top {
  margin: 80rpx 20rpx 10rpx;
  color: #333;
  font-weight: 700;
  font-size: 30rpx;
}
.item-header-top {
  margin: 120rpx 20rpx 10rpx;
  color: #0B8DF8;
  font-weight: 700;
  font-size: 30rpx;
}
.item-header {
  margin: 0 20rpx 10rpx;
  color: #0B8DF8;
  font-weight: 700;
 font-size: 30rpx;
}
.item-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 10rpx 0 10rpx;
  flex-wrap: wrap;
  padding-bottom: 30rpx;
  background-color: white;
}

.item-title{
  width: 21%;
  color: #000;
  font-size: 30rpx;
  text-align: center;
  padding:10rpx 10rpx;
  box-shadow: 0 0 5rpx #bbb;
  border-radius: 10rpx;
  background: white;
  margin:10rpx 2.0% 10rpx;
}
.item-title-active{
  color: white;
  background: #0B8DF8;
}

.item-interval {
  height: 20rpx;
 }
 .opera-layout{
  position: absolute;
  left: 5%;
  bottom: 60rpx;
  width: 90%;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10rpx 80rpx 30rpx;
  border-radius: 10rpx;
  font-size: 34rpx;
}
 .opera-item-cancel{
  display: inline-block;
  color: white;
  background:#ccc;
  border-radius: 70rpx;
  padding: 10rpx 50rpx;
}
.opera-item-confirm{
  display: inline-block;
  color: white;
  background:#0B8DF8;
  border-radius: 70rpx;
  padding: 10rpx 50rpx;
}

2.2.3. selectionBox.js

import areaJson from '../../public/json/areaJson';
Page({
  data: {
    comId: null,
    ciryList: [],
    countyList: [],
    streetList: [],
    communityList: [],
    gridList: [],
    isCountyHidden: true,
    isStreetHidden: true,
    isCommunityHidden: true,
    isGridHidden: true,
    cityIndex: null,
    countyIndex: null,
    streetIndex: null,
    communityIndex: null,
    gridIndex: null,
  },
  /**
   * 获取市级数据
   */
  getCityData: function () {
    let that = this
    that.setData({
      cityList: areaJson.data.areaList
    })
  },
  /**
   * 获取区县数据
   */
  getCountyData: function (itemid) {
    let that = this
    that.setData({
      countyList: areaJson.data.countyList
    })
  },
  /**
   * 获取街道数据
   */
  getStreetData: function (itemid) {
    let that = this
    that.setData({
      streetList: areaJson.data.streetList
    })
  },
  /**
   * 获取社区数据
   */
  getCommunityData: function (itemid) {
    let that = this
    that.setData({
      communityList: areaJson.data.communityList
    })
  },
  /**
   * 获取网格数据
   */
  getGridData: function (itemid) {
    let that = this
    that.setData({
      gridList: areaJson.data.gridList
    })
  },
  /**
   * 市级点击
   */
  cityClick: function (e) {
    var that = this
    var itemIndex = parseInt(e.currentTarget.dataset.index) + 1
    var itemValue = e.currentTarget.dataset.value
    var itemId = e.currentTarget.dataset.itemId
    that.setData({
      countyList: [],
      streetList: [],
      communityList: [],
      gridList: [],
      isCountyHidden: false,
      isStreetHidden: true,
      isCommunityHidden: true,
      isGridHidden: true,
      cityIndex: itemIndex,
      countyIndex: null,
      streetIndex: null,
      communityIndex: null,
      gridIndex: null,
      cityStr: itemValue,
      countyStr: '',
      streetStr: '',
      communityStr: '',
      gridStr: ''
    })
    //获取区县数据
    that.getCountyData(itemId)
  },
  /**
   * 区县点击
   */
  countyClick: function (e) {
    var that = this
    var itemIndex = parseInt(e.currentTarget.dataset.index) + 1
    var itemValue = e.currentTarget.dataset.value
    var itemId = e.currentTarget.dataset.itemId
    that.setData({
      streetList: [],
      communityList: [],
      gridList: [],
      isStreetHidden: false,
      isCommunityHidden: true,
      isGridHidden: true,
      countyIndex: itemIndex,
      streetIndex: null,
      communityIndex: null,
      gridIndex: null,
      countyIndex: itemIndex,
      streetIndex: null,
      communityIndex: null,
      gridIndex: null,
      countyStr: itemValue,
      streetStr: '',
      communityStr: '',
      gridStr: ''
    })
    //获取街道数据
    that.getStreetData(itemId)
  },
  /**
   * 街道点击
   */
  streetClick: function (e) {
    var that = this
    var itemIndex = parseInt(e.currentTarget.dataset.index) + 1
    var itemValue = e.currentTarget.dataset.value
    var itemId = e.currentTarget.dataset.itemId
    that.setData({
      communityList: [],
      gridList: [],
      isCommunityHidden: false,
      isGridHidden: true,
      streetIndex: itemIndex,
      communityIndex: null,
      gridIndex: null,
      streetStr: itemValue,
      communityStr: '',
      gridStr: ''
    })
    //获取社区数据
    that.getCommunityData(itemId)
  },
  /**
   * 社区点击
   */
  communityClick: function (e) {
    var that = this
    var itemIndex = parseInt(e.currentTarget.dataset.index) + 1
    var itemValue = e.currentTarget.dataset.value
    var itemId = e.currentTarget.dataset.itemId
    that.setData({
      gridList: [],
      isGridHidden: false,
      communityIndex: itemIndex,
      gridIndex: null,
      communityStr: itemValue,
      gridStr: ''
    })
    //获取网格数据
    that.getGridData(itemId)
  },
  /**
   * 网格点击
   */
  gridClick: function (e) {
    var that = this
    var itemIndex = parseInt(e.currentTarget.dataset.index) + 1
    var itemValue = e.currentTarget.dataset.value
    that.setData({
      gridIndex: itemIndex,
      deptId: itemIndex-1,
      gridStr: itemValue,
    })
  },
  // 取消选择
  cliclCancel: function () {
    var that = this
    //清除数据
    that.clearData()
    that.triggerEvent('cliclCancel')
  },
  /**
   * 清除数据
   */
  clearData: function () {
    var that = this
    that.setData({
      ciryList: [],
      countyList: [],
      streetList: [],
      communityList: [],
      gridList: [],
      isCountyHidden: true,
      isStreetHidden: true,
      isCommunityHidden: true,
      isGridHidden: true,
      cityIndex: null,
      countyIndex: null,
      streetIndex: null,
      communityIndex: null,
      gridIndex: null,
      cityStr: '',
      countyStr: '',
      streetStr: '',
      communityStr: '',
      gridStr: ''
    })
  },
  // 确定选择
  cliclConfirm: function () {
    let that = this
    var cityStr = that.data.cityStr
    var countyStr = that.data.countyStr
    var streetStr = that.data.streetStr
    var communityStr = that.data.communityStr
    var gridStr = that.data.gridStr
    if (!cityStr) {
      wx.showToast({
        icon: 'none',
        title: '请选择市',
      })
      return
    } else if (!countyStr) {
      wx.showToast({
        icon: 'none',
        title: '请选择区县',
      })
      return
    } else if (!streetStr) {
      wx.showToast({
        icon: 'none',
        title: '请选择街镇',
      })
      return
    } else if (!communityStr) {
      wx.showToast({
        icon: 'none',
        title: '请选择社区',
      })
      return
    } else if (!gridStr) {
      wx.showToast({
        icon: 'none',
        title: '请选择网格',
      })
      return
    } 
    //清除数据
    that.clearData()
    var obj = {}
    obj.id = that.data.deptId
    obj.name = cityStr+countyStr+streetStr+communityStr+gridStr
    if (obj) {
      that.triggerEvent('cliclConfirm', obj)
    } else {
      wx.showToast({
        icon: 'none',
        title: '缺少参数',
      })
    }
  },
})