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

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 = thisthat.selectionbox = that.selectComponent("#selectionbox");},/*** 获取网格*/selectGrid: function () {let that = thisthat.selectionbox.getCityData()that.setData({area_selection: false})},// 地区选择框确定cliclConfirm: function (e) {let that = thisvar gridObj = e.detailthat.setData({gridName: gridObj.name,area_selection: true})},// 地区选择框取消cliclCancel: function (e) {let that = thisthat.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 = thisthat.setData({cityList: areaJson.data.areaList})},/*** 获取区县数据*/getCountyData: function (itemid) {let that = thisthat.setData({countyList: areaJson.data.countyList})},/*** 获取街道数据*/getStreetData: function (itemid) {let that = thisthat.setData({streetList: areaJson.data.streetList})},/*** 获取社区数据*/getCommunityData: function (itemid) {let that = thisthat.setData({communityList: areaJson.data.communityList})},/*** 获取网格数据*/getGridData: function (itemid) {let that = thisthat.setData({gridList: areaJson.data.gridList})},/*** 市级点击*/cityClick: function (e) {var that = thisvar itemIndex = parseInt(e.currentTarget.dataset.index) + 1var itemValue = e.currentTarget.dataset.valuevar itemId = e.currentTarget.dataset.itemIdthat.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 = thisvar itemIndex = parseInt(e.currentTarget.dataset.index) + 1var itemValue = e.currentTarget.dataset.valuevar itemId = e.currentTarget.dataset.itemIdthat.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 = thisvar itemIndex = parseInt(e.currentTarget.dataset.index) + 1var itemValue = e.currentTarget.dataset.valuevar itemId = e.currentTarget.dataset.itemIdthat.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 = thisvar itemIndex = parseInt(e.currentTarget.dataset.index) + 1var itemValue = e.currentTarget.dataset.valuevar itemId = e.currentTarget.dataset.itemIdthat.setData({gridList: [],isGridHidden: false,communityIndex: itemIndex,gridIndex: null,communityStr: itemValue,gridStr: ''})//获取网格数据that.getGridData(itemId)},/*** 网格点击*/gridClick: function (e) {var that = thisvar itemIndex = parseInt(e.currentTarget.dataset.index) + 1var itemValue = e.currentTarget.dataset.valuethat.setData({gridIndex: itemIndex,deptId: itemIndex-1,gridStr: itemValue,})},// 取消选择cliclCancel: function () {var that = this//清除数据that.clearData()that.triggerEvent('cliclCancel')},/*** 清除数据*/clearData: function () {var that = thisthat.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 = thisvar cityStr = that.data.cityStrvar countyStr = that.data.countyStrvar streetStr = that.data.streetStrvar communityStr = that.data.communityStrvar gridStr = that.data.gridStrif (!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.deptIdobj.name = cityStr+countyStr+streetStr+communityStr+gridStrif (obj) {that.triggerEvent('cliclConfirm', obj)} else {wx.showToast({icon: 'none',title: '缺少参数',})}},
})