当前位置: 首页 > news >正文

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

在这里插入图片描述

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 自动生成 前不久&#xff0c;Midjourney 宣布支持图片转 prompt 功能。 原始图片​ blueprint holographic design of futuristic Midlibrary --v 5Prompt 生成​ 直接输入 /describe 指令通过弹出窗口上传图像并发送&#xff0c;Midjourney 会根据该图像生成四种可…...

基于微信小程序的健身房私教预约平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…...

安卓Compose(二)

在上一篇博客中&#xff0c;我们已经了解了安卓Compose的一些基本概念以及使用方法&#xff0c;接下来我们将继续深入学习。 一、Compose的基础组件 文本组件(Text) 文本组件是Compose中最基本的组件之一&#xff0c;用于在界面上显示文本。使用方式如下&#xff1a; // 定…...

TCP 和 UDP哪个更好

传输控制协议 &#xff08;TCP&#xff09; 和用户数据报协议 &#xff08;UDP&#xff09; 是互联网的基础支柱&#xff0c;支持从网络源到目的地的不同类型的数据传输。TCP更可靠&#xff0c;而UDP优先考虑速度和效率。本文解释了两种协议的工作原理&#xff0c;并详细讨论了…...

Spring Boot 如何实现单点登录(SSO)

当今的应用程序越来越多地采用了微服务架构&#xff0c;这就引出了一个重要的问题&#xff1a;如何实现单点登录&#xff08;Single Sign-On&#xff0c;简称SSO&#xff09;来确保用户在多个微服务之间无需重复登录。Spring Boot是一个流行的Java框架&#xff0c;它提供了一些…...

C#中的(++)和(--)运算符

目录 背景: 的前加 效果展示:​ 的后加 效果展示 :​ 总结: 背景: 自增和自减运算符存在于C/C/C#/Java等高级语言中&#xff0c;它的作用是在运算结束前(前置自增自减运算符 )或后(后置自增自减运算符 )将 变量的值加(或减)1。 在C#中&#xff0c;和--是自增和自减运…...

SVG鼠标漫游

鼠标漫游 鼠标漫游就是通过移动光标和滚轮&#xff0c;完成画布缩放、移动的交互过程。 svg 绘图使用原点在左上角的坐标系统&#xff0c;一个单位代表一像素。这里的像素不能简单理解为屏幕像素&#xff0c;是一个用户单位。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 集群有着高可用、易扩展、更好的性能等优势&#xff0c;本文主要是实战搭建一个三主三从的 Redis 集群。 正常来说&#xff0c;搭建 Redis 集群需要 6 台服务器。为了简单一点&#xff0c;本文通过一台服务器&#xff0c;6 个端口&#xff0c;搭建一个 Redis …...

图形处理软件Photoshop Elements 2020 mac中文版 ps简化版

Photoshop Elements 2020 mac是一款非常实用的图形处理工具。ps elements 2020 mac中文版可以帮助您自动生成照片和视频作品的功能&#xff0c;采用Adobe Sensei AI技术可进行图像组织、编辑和创建等。Photoshop Elements 2020 for Mac激活版可以帮助您轻松整理照片和视频&…...

opencv for unity package在unity中打开相机不需要dll

下载OpenCV for Unity 导入后&#xff0c;里面有很多案例 直接打开就可以运行 打开相机...

[Linux入门]---进程状态

文章目录 1.进程主要状态进程运行状态进程阻塞状态进程的挂起状态 2.Linux进程状态Linux进程内核源代码①R运行状态②S睡眠状态③D磁盘休眠状态T停止状态④X死亡状态⑤Z僵尸状态⑥孤儿进程 3.总结 1.进程主要状态 进程运行状态 ①内存中有一个运行队列&#xff0c;其中有两个指…...

腾讯mini项目-【指标监控服务重构】2023-08-29

今日已办 Collector 指标聚合 由于没有找到 Prometheus 官方提供的可以聚合指定时间区间内的聚合函数&#xff0c;所以自己对接Prometheus的api来聚合指定容器的cpu_avg、cpu_99th、mem_avg 实现成功后对接小组成员测试完提供的时间序列和相关容器&#xff0c;将数据记录在表格…...

opencv 常用的滤波器及应用技巧

常用滤波器&#xff1a; 标准滤波器&#xff08;邻域平均法&#xff09;&#xff1a;该滤波器是所有滤波器里最简单的一种&#xff0c;输出的像素值由输入的滤波核所覆盖的像素值均值决定&#xff08;每个邻域像素对其贡献的权重是相同的&#xff09;。高斯滤波&#xff1a;该…...

【PyTorch攻略(1/7)】 张量基本语法

一、说明 Tensor 是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。在 PyTorch 中&#xff0c;我们使用张量对模型的输入和输出以及模型的参数进行编码。 张量类似于 NumPy 和 ndarray&#xff0c;除了张量可以在 GPU 或其他硬件加速器上运行。事实上&#xff0c;张量和…...

什么是Jmeter ?Jmeter使用的原理步骤是什么?

1.1 什么是 JMeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具。用于对软件做压力测试&#xff0c;它最初被设计用于 Web 应用测试&#xff0c;但后来扩展到其他测试领域。 它可以用于测试静态和动态资源&#xff0c;例如静态文件、Java 小服务程序、CGI 脚…...

Mac 通过 brew安装的 ffmpeg 切换版本

现有版本为 6.x &#xff0c;想切换至 5.x 版本 先安装 5.x 版本 brew install ffmpeg5安装完成后会出现具体版本号&#xff0c;也可以自己指定例如 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版本新增的数据类型&#xff0c;用好JSON数据类型可以有效解决很多业务中实际问题。 使用JSON数据类型&#xff0c;推荐用MySQL 8.0.17以上的版本&#xff0c;性能更好&#xff0c;同时也支持Multi-Valued Indexes&#xff1b; JSON数…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...