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

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数…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
