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

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数…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
