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

最新推荐文章于 2024-08-19 10:29:07 发布
最新推荐文章于 2024-08-19 10:29:07 发布
阅读量1k 收藏 10
点赞数 8
分类专栏： 微信小程序 文章标签： 微信小程序 notepad++ 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36158551/article/details/135883041
版权

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: '缺少参数',
      })
    }
  },
})
雪芽蓝域zzs
关注
专栏目录
微信小程序---省市选择控件
12-11
微信小程序---省市选择控件 微信小程序---省市选择控件
微信小程序地区选择器省市区选择器
08-10
微信小程序自带了时间选择器、日期选择器，但是没有地区选择器
微信小程序地址选择器 wx_selectArea 使用教程
最新发布
gitblog_00152的博客
08-19 391
微信小程序地址选择器 wx_selectArea 使用教程 项目地址:https://gitcode.com/gh_mirrors/wx/wx_selectArea 1. 项目的目录结构及介绍 wx_selectArea/ ├── README.md ├── app.js ├── app.json ├── app.wxss ├── components/ │ └── area-picker/ ...
微信小程序选择市，区县
a_靖的博客
05-30 9365
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 微信小程序选择市，区县的实现 demo的需求是 做一个两列选择器，选择江西省范围内的所有市以及区县，滑动到每个城市 自动匹配出它的区县并赋值到第二列，用户选择完以后验证选中的区县是否匹配。（因为自动匹配出第二列的区县需要一点时间，用户滑动第一列市快的话会出现市和区县不匹配的解决方法） 滚动选择器 ...
小程序实现地区选择和template
11-29
代码实现了template组件和地区选择，让你快速入门template组件
微信小程序 车轮之 地区选择
xiaochun365的博客
06-07 1254
车轮出产地址 http://www.see-source.com/weixinwidget/detail.html?wid=81 本文是经学习消化之后所写，功能有所改进。 功能描述： 1.右侧字母列表点击，左侧城市列表随之滚动到对应位置。 2.右侧字母列表滑动，左侧城市列表随之滚动到对应位置。 3.左侧城市列表滚动，右侧字母列表相应显示所在位置。 4.点击城市项，顶部显示当前选择城市。
微信小程序实现选择地区demo，记录最近访问的地区
xioxi
06-15 614
微信小程序实现选择地区demo，记录最近访问的地区
微信小程序省市区json
05-09
微信小程序省市区json是微信小程序开发中用于实现地区选择功能的一种常见数据格式。在微信小程序中，为了提供用户友好的地址选择体验，开发者通常会利用预定义的JSON数据来存储全国各省份、城市和区县的层级关系。...
微信小程序-微信小程序漂亮的地址选择器
08-06
本项目“微信小程序-微信小程序漂亮的地址选择器”（wxcode-addr）是针对微信小程序开发的一个组件，旨在为用户提供美观、易用的地址选择功能。 地址选择器在许多应用中都是必不可少的，例如在线购物、订餐服务等。...
微信小程序-城市选择器源码
06-12
微信小程序城市选择器是一款专为微信小程序开发设计的组件，用于在应用中提供方便快捷的城市选择功能。这个源码包提供了完整的实现方案，包括前端界面展示、数据处理以及用户交互逻辑，开发者可以轻松地将其集成到...
基于微信小程序的高校学生宿舍报修管理系统的设计.pdf
07-01
基于微信小程序开发的高校学生宿舍报修管理系统，能为学生、宿舍管理人员和维修人员带来以下改善： - 学生可以通过微信小程序一键提交报修信息，大大提高了报修的便利性和快捷性。 - 报修信息通过微信小程序自动...
微信小程序 城市选择器 城市切换
01-14
微信小程序 城市选择器 城市切换
微信小程序开发之城市选择器 城市切换
12-23
微信小程序开发之城市选择器 城市切换
微信小程序 省市区三级联动选择
10-14
微信小程序 省市区三级联动选择
微信小程序Demo：漂亮的地址选择器
07-12
在微信小程序开发中，创建一个美观且功能完善的地址选择器是提升用户体验的关键因素之一。"微信小程序Demo：漂亮的地址选择器"就是一个专为此目的设计的示例项目，它旨在帮助开发者构建用户友好的地址选择界面。这个...
微信小程序选择地区，时间
xiaoshan0711的专栏
01-17 2558
1、index.wxml   当前城市选择：{{picker1Range[picker1Value]}}   当前时间选择:{{timeValue}}   当前日期选择：{{dateValue}} 2、index.js Page({   data:{     picker1Value:0,     picker1Range:['北京','广州','潮州','
微信小程序实战—实现城市列表的选择
热门推荐
yyf的博客
01-19 2万+
微信小程序实战—实现城市列表的选择 实现效果预览 实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json {
微信小程序原生 地区选择器
鱼猫的博客
01-17 1044
小程序上的地区选择器（picker）
Pentoncos的博客
11-08 1905
在钉钉小程序项目上需要一个地区选择器，看公司没有其他模板，所以自己封装了一个。代码如下： Page({ data:{ // 省市区三级联动初始化 region: [], provinces: "", citys: "", areas: "", citysData: [], value: [0, 0, 0], isChangeLocation: false }, // 初始化地区树 initAreaTree() {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值