微信小程序,动态设置三级联动, 省市区街道

1.第一步 传parentId=0 查询省份
2.第二步 选择省份,传pathId=选择省份的pathId, 不传parentId,会查询出 市/县数据
3.第三步 根据选择县的parentId 查询街道数据,传parentId=选择的县id
4.选择结果回显 显示所选择的 path 以/分割 取最后一级
<van-dropdown-menu active-color="#409eff" custom-class="filter-menus"><van-dropdown-item id="areaAll" title="区域选择"><view class="areaBox" style="height:288rpx; overflow:auto;"><van-cell class="van-dropdown-item__option dropdown-time {{item.id === parentId ? 'time-active' : ''}}" wx:for="{{areaAllList}}" wx:key="index" data-item="{{item}}" bindtap="areaClick"><view class="van-cell"><view class="van-dropdown-item__title">{{item.name}}</view></view></van-cell></view><view><van-picker show-toolbar columns='{{columns}}' value-key='name' bind:change='chgArea' bind:confirm='confirmArea' bind:cancel='areaClose' /></view></van-dropdown-item></van-dropdown-menu>
Page({data: {//行政区域areaAllList: [],columns: [// {// values: '', // one, //可以是数组,或者对象数组// className: 'column1' //选择器的第一列// },// {// values: '', // two[one[0].name], //默认选中two对象中的第一项// className: 'column2', //选择器的第二列// },// {// values: '', // three[two[one[0].name][0].name], //默认选中three对象中的第一项// className: 'column3', //选择器的第三列// }],one: [],two: []}})onLoad(options) {//行政区划 areaAllListthis.getParent() //
},
method:{areaClick(e) {//点击省, 请求市级的数据const item = e.currentTarget.dataset.itemthis.setData({parentId: item.id})this.initPath(item.pathId)},getParent() {//获取顶部的省级fetch.apply.getAreaAll({parentId: 0}, res => {if (res.flag == 0) {this.setData({areaAllList: res.object})}})},initPath(pathId) {// 1写入 选择器第一级 数据 ; 2将二级数据, 做成 columns 的格式,并写入fetch.apply.getAreaAll({pathId: pathId}, res => {if (res.flag == 0 && res.object.length > 0) {var v1 = []res.object.forEach((e, i) => {v1[e.name] = e.childs});this.setData({one: res.object,two: v1,})this.setData({columns: [{values: this.data.one, //可以是数组,或者对象数组className: 'column1', //选择器的第一列},{values: this.data.two[this.data.one[0].name], //默认选中two对象中的第一项className: 'column2', //选择器的第二列defaultIndex: 0},{values: '', // this.data.three[this.data.two[this.data.one[0].name][0].name], //默认选中three对象中的第一项className: 'column3', //选择器的第三列}],})} else {this.setData({one: '',two: '',columns: []})}})},confirmArea(event) {// 确定 选择的地区数据let value = event.detail.valueif (!value[0]) {toast("请选择城市")return}if (!value[2]) {//将选中的文字和对应的id拿出来使用// wx.showModal({// title: '',// content: '您选中了“' + value[0].name + ',' + value[1].name + ',' +// '”, di为“' + value[0].id + ',' + value[1].id +// ',' + '”',// showCancel: false// })this.setData({areaPathId: value[1].id})} else {//将选中的文字和对应的id拿出来使用// wx.showModal({// title: '',// content: '您选中了“' + value[0].name + ',' + value[1].name + ',' +// value[2].name + '”, di为“' + value[0].id + ',' + value[1].id +// ',' + value[2].id + '”',// showCancel: false// })this.setData({areaPathId: value[2].id})}this.getList()this.areaClose()},chgArea(event) {// 滚动选择器, 通过第二级,获取最后一级, 街道数据let picker = event.detail.pickerlet value = event.detail.valuelet index = event.detail.index//在change 第一列的时候,动态更改第二列的数据//setColumnValues是vant自带的实例方法//第一个参数是列数,从0开始;第二个参数是第二列应该显示的数据picker.setColumnValues(1, this.data.two[value[0].name])//此处vant-picker有一个bug,当只滑动第一级时,返回的value数据是错误的,需要我们自己根据第二 级计算,去获取第三级数据if (index == 0) {// picker.setColumnValues(2, this.data.three[(this.data.two[value[0].name][0]).name])} else if (index == 1) {var v2 = {}fetch.apply.getAreaAll({parentId: value[index].id}, res => {if (res.flag == 0) {v2[value[index].name] = res.objectthis.setData({three: v2})picker.setColumnValues(2, this.data.three[value[1].name])}})} else {picker.setColumnValues(2, this.data.three[value[1].name])}},areaClose() {this.selectComponent('#areaAll').toggle()},
}
技术要点
1 按照固定格式, 设置columns 的数据
2 picker.setColumnValues() 方法,获取数据
columns 的数据 格式
var one = [{ id: 111, 'name': '杭州' },{ id: 222, 'name': '宁波' },
]
var two = {'杭州': [{ id: 11100, 'name': '国杭州' },{ id: 22201, 'name': '国宁波' },],'宁波': [{ id: 11102, 'name': '中杭州' },{ id: 22203, 'name': '中宁波' },{ id: 33304, 'name': '中温州' },]
}
var three = {'国杭州': [{ id: 1110000, 'name': 'aaa' },{ id: 2220101, 'name': 'bbb' },],'国宁波': [{ id: 1110102, 'name': 'ccc' },{ id: 2220103, 'name': 'ddd' },{ id: 3330104, 'name': 'eee' },],'中杭州': [{ id: 1110205, 'name': 'fff' },{ id: 2220206, 'name': 'ggg' },{ id: 3330207, 'name': 'hhh' },],'中宁波': [{ id: 1110308, 'name': 'www' },{ id: 2220309, 'name': 'ttt' },{ id: 3330310, 'name': 'yyy' },],'中温州': [{ id: 1110411, 'name': 'jjj' },{ id: 2220412, 'name': 'kkk' },{ id: 3330413, 'name': 'ppp' },]
}
相关文章:
微信小程序,动态设置三级联动, 省市区街道
1.第一步 传parentId0 查询省份 2.第二步 选择省份,传pathId选择省份的pathId, 不传parentId,会查询出 市/县数据 3.第三步 根据选择县的parentId 查询街道数据,传parentId选择的县id 4.选择结果回显 显示所选择的 path 以/分割 取最后一级<van-dropdown-menu…...
Learn Prompt- Midjourney 图片生成:Image Prompts
Prompt 自动生成 前不久,Midjourney 宣布支持图片转 prompt 功能。 原始图片 blueprint holographic design of futuristic Midlibrary --v 5Prompt 生成 直接输入 /describe 指令通过弹出窗口上传图像并发送,Midjourney 会根据该图像生成四种可…...
基于微信小程序的健身房私教预约平台设计与实现(源码+lw+部署文档+讲解等)
文章目录 前言系统主要功能:具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…...
安卓Compose(二)
在上一篇博客中,我们已经了解了安卓Compose的一些基本概念以及使用方法,接下来我们将继续深入学习。 一、Compose的基础组件 文本组件(Text) 文本组件是Compose中最基本的组件之一,用于在界面上显示文本。使用方式如下: // 定…...
TCP 和 UDP哪个更好
传输控制协议 (TCP) 和用户数据报协议 (UDP) 是互联网的基础支柱,支持从网络源到目的地的不同类型的数据传输。TCP更可靠,而UDP优先考虑速度和效率。本文解释了两种协议的工作原理,并详细讨论了…...
Spring Boot 如何实现单点登录(SSO)
当今的应用程序越来越多地采用了微服务架构,这就引出了一个重要的问题:如何实现单点登录(Single Sign-On,简称SSO)来确保用户在多个微服务之间无需重复登录。Spring Boot是一个流行的Java框架,它提供了一些…...
C#中的(++)和(--)运算符
目录 背景: 的前加 效果展示: 的后加 效果展示 : 总结: 背景: 自增和自减运算符存在于C/C/C#/Java等高级语言中,它的作用是在运算结束前(前置自增自减运算符 )或后(后置自增自减运算符 )将 变量的值加(或减)1。 在C#中,和--是自增和自减运…...
SVG鼠标漫游
鼠标漫游 鼠标漫游就是通过移动光标和滚轮,完成画布缩放、移动的交互过程。 svg 绘图使用原点在左上角的坐标系统,一个单位代表一像素。这里的像素不能简单理解为屏幕像素,是一个用户单位。svg 的 width 和 height 属性决定图像在用户系统的…...
关于Github报SSL_ERROR_SYSCALL的解决方案
最近在运行RN项目的时候发现,在我pod install命令安装pod包时产生了 SSL_ERROR_SYSCALL 的错误,如下所示。 [!] Error installing CocoaAsyncSocket [!] /usr/bin/git clone https://github.com/robbiehanson/CocoaAsyncSocket.git /var/folders/v0/2435fl9178sd4r2_1mdgk_r…...
Redis 集群搭建教程
一、介绍 Redis 集群有着高可用、易扩展、更好的性能等优势,本文主要是实战搭建一个三主三从的 Redis 集群。 正常来说,搭建 Redis 集群需要 6 台服务器。为了简单一点,本文通过一台服务器,6 个端口,搭建一个 Redis …...
图形处理软件Photoshop Elements 2020 mac中文版 ps简化版
Photoshop Elements 2020 mac是一款非常实用的图形处理工具。ps elements 2020 mac中文版可以帮助您自动生成照片和视频作品的功能,采用Adobe Sensei AI技术可进行图像组织、编辑和创建等。Photoshop Elements 2020 for Mac激活版可以帮助您轻松整理照片和视频&…...
opencv for unity package在unity中打开相机不需要dll
下载OpenCV for Unity 导入后,里面有很多案例 直接打开就可以运行 打开相机...
[Linux入门]---进程状态
文章目录 1.进程主要状态进程运行状态进程阻塞状态进程的挂起状态 2.Linux进程状态Linux进程内核源代码①R运行状态②S睡眠状态③D磁盘休眠状态T停止状态④X死亡状态⑤Z僵尸状态⑥孤儿进程 3.总结 1.进程主要状态 进程运行状态 ①内存中有一个运行队列,其中有两个指…...
腾讯mini项目-【指标监控服务重构】2023-08-29
今日已办 Collector 指标聚合 由于没有找到 Prometheus 官方提供的可以聚合指定时间区间内的聚合函数,所以自己对接Prometheus的api来聚合指定容器的cpu_avg、cpu_99th、mem_avg 实现成功后对接小组成员测试完提供的时间序列和相关容器,将数据记录在表格…...
opencv 常用的滤波器及应用技巧
常用滤波器: 标准滤波器(邻域平均法):该滤波器是所有滤波器里最简单的一种,输出的像素值由输入的滤波核所覆盖的像素值均值决定(每个邻域像素对其贡献的权重是相同的)。高斯滤波:该…...
【PyTorch攻略(1/7)】 张量基本语法
一、说明 Tensor 是一种特殊的数据结构,与数组和矩阵非常相似。在 PyTorch 中,我们使用张量对模型的输入和输出以及模型的参数进行编码。 张量类似于 NumPy 和 ndarray,除了张量可以在 GPU 或其他硬件加速器上运行。事实上,张量和…...
什么是Jmeter ?Jmeter使用的原理步骤是什么?
1.1 什么是 JMeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具。用于对软件做压力测试,它最初被设计用于 Web 应用测试,但后来扩展到其他测试领域。 它可以用于测试静态和动态资源,例如静态文件、Java 小服务程序、CGI 脚…...
Mac 通过 brew安装的 ffmpeg 切换版本
现有版本为 6.x ,想切换至 5.x 版本 先安装 5.x 版本 brew install ffmpeg5安装完成后会出现具体版本号,也可以自己指定例如 brew install ffmpeg5.1.3 配置环境变量 .zshrc vi ~/.zshrc添加如下命令 export PATH/usr/local/Cellar/ffmpeg5/5.1.3/bin:…...
【Spring Boot】实战:实现数据缓存框架
🌿欢迎来到@衍生星球的CSDN博文🌿 🍁本文主要学习【Spring Boot】实现数据缓存框架 🍁 🌱我是衍生星球,一个从事集成开发的打工人🌱 ⭐️喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路⭐️💠作为一名热衷于分享知识的程序员,我乐于在CSDN上与广大开发者…...
MySQL数据类型之JSON
MySQL数据类型之JSON SON类型是MySQL 5.7版本新增的数据类型,用好JSON数据类型可以有效解决很多业务中实际问题。 使用JSON数据类型,推荐用MySQL 8.0.17以上的版本,性能更好,同时也支持Multi-Valued Indexes; JSON数…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
