微信小程序-基于Vant Weapp UI 组件库的Area 省市区选择
Area 省市区选择,省市区选择组件通常与 弹出层 组件配合使用。
areaList 格式
areaList 为对象结构,包含 province_list、city_list、county_list 三个 key。
每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。比如北京的地区码为 11,以 0 补足 6 位,为 110000。
Vant 官方提供了一份默认的省市区数据,可以通过 @vant/area-data 引入。
1. 省市区数据引入
npm i @vant/area-data
安装后,使用@vant下面的路径无法引用成功

我们新建一个用来引入文件的文件夹node_Files,放在pages下面,把@vant中的 area-data 整个进行拷贝,把dist里面的index.cjs.js文件名改为data.js,index.d.ts文件名改为data.d.ts。

引入链接
//省市区数据引入使用
import {areaList
} from "../../pages/node_Files/area-data/dist/data";
2. 封装组件

address-option.wxml
<!--components/address-option.wxml-->
<van-field value="{{ fieldValue }}" readonly clearable input-align="{{inputAlign}}" label="{{label}}" placeholder="请选择地区" bind:tap="onClick" required is-link />
<van-action-sheet show="{{ show }}"><van-area area-list="{{ areaList }}" title="地区选择" bind:confirm="onConfirm" bind:cancel="onClose" />
</van-action-sheet>
addressOption.js
// components/addressOption/addressOption.js
//省市区数据引入使用
import {areaList
} from "../../pages/node_Files/area-data/dist/data";Component({/*** 组件的属性列表*/properties: {label: {type: String,value: "地区"},inputAlign: {type: String,value: "left"},optionValue: {type: String,value: ""},mustFillIn: {type: String,value: false}},/*** 组件的初始数据*/data: {areaList,show:false},/*** 组件的方法列表*/methods: {onClick() {this.setData({show: true,});},onConfirm(e){console.log("确定省市区:",e)var address=""e.detail.values.forEach(element => {address=address+element.name});this.setData({address: address,show: false,})this.handleTap()console.log("省市区为:",address)},handleTap() {let value = this.data.addressconsole.log("fieldValue 地址:", value)this.triggerEvent("addressTab", value)},onClose() {this.setData({show: false,});},},observers: {optionValue: function (e) {this.setData({fieldValue: e})}},
})
address-option.json
{"component": true,"usingComponents": {"van-field": "@vant/weapp/field/index","van-action-sheet": "@vant/weapp/action-sheet/index","van-area": "@vant/weapp/area/index"}
}
3. 页面使用省市区
3.1. 引入组件
address.json
"usingComponents": {"address-option": "/components/address-option/address-option"}
3.2. 调用组件
address.wxml
<address-option bind:addressTab="onAddress"></address-option>
3.3. 接收子组件传过来的值
address.js
Page({/*** 页面的初始数据*/data: {radio: '1',fieldValue: ""},onAddress(e){this.setData({fieldValue: e.detail})},
})
相关文章:
微信小程序-基于Vant Weapp UI 组件库的Area 省市区选择
Area 省市区选择,省市区选择组件通常与 弹出层 组件配合使用。 areaList 格式 areaList 为对象结构,包含 province_list、city_list、county_list 三个 key。 每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两…...
NIO(New IO)和BIO(Blocking IO)的区别
Java中的NIO(New IO)和BIO(Blocking IO)的区别及NIO的核心组件 Java中的NIO(New IO)和BIO(Blocking IO)是两种不同的网络通信模型,各自具有独特的特性和适用场景。下面将…...
ROS1入门教程6:复杂行为处理
一、新建项目 # 创建工作空间 mkdir -p demo6/src && cd demo6# 创建功能包 catkin_create_pkg demo roscpp rosmsg actionlib_msgs message_generation tf二、创建行为 # 创建行为文件夹 mkdir action && cd action# 创建行为文件 vim Move.action# 定义行为…...
碰撞检测算法之闵可夫斯基差集法(Minkowski Difference)
在游戏开发和机器人路径规划乃至于现在比较火的自动驾驶中,我们常常需要确定两个物体是否发生碰撞,有一种通过闵可夫斯基差集法求是否相交的算法,下面将介绍一下 闵可夫斯基差集法的优势 闵可夫斯基差集法优势: 可以处理复杂的…...
【唐叔学算法】第18天:解密选择排序的双重魅力-直接选择排序与堆排序的Java实现及性能剖析
引言 在数据排序的世界里,选择排序是一类简单而直观的算法,它通过不断选取未排序部分中的最小(或最大)元素来逐步构建有序序列。今天,我们将深入探讨两种基于选择思想的排序方法——直接选择排序和堆排序,…...
2008-2020年各省技术服务水平相关指标数据
2008-2020年各省技术服务水平相关指标数据 1.时间:2008-2020年 2.指标:行政区划代码、地区、年份、信息传输、软件和信息技术服务业城镇单位就业人员(万人)、软件业务收入(万元)、高技术产品出口额占商品出口额比重(%) 3.范围&…...
机器学习DAY4续:梯度提升与 XGBoost (完)
本文将通过 XGBoost 框架来实现回归、分类和排序任务,帮助理解和掌握使用 XGBoost 解决实际问题的能力。我们将从基本的数据处理开始,逐步深入到模型训练、评估以及预测。最后,将模型进行保存和加载训练好的模型。 知识点 回归任务分类任务…...
ML-Agents:训练配置文件(一)
注:本文章为官方文档翻译,如有侵权行为请联系作者删除 Training Configuration File - Unity ML-Agents Toolkit–原文链接 常见训练器配置 关于训练,您需要做出的首要决定之一是使用哪种训练器:PPO、SAC 还是 POCA。有些训练配置…...
【物联网技术与应用】 实验13:雨滴传感器实验
实验13 雨滴传感器实验 【实验介绍】 雨滴传感器或雨滴检测传感器用于检测是否下雨以及降雨。广泛应用于汽车的雨刷系统、智能照明系统和天窗系统。 【实验组件】 ● Arduino Uno主板* 1 ● USB数据线*1 ● 雨滴传感器* 1 ● 雨滴传感器调理板* 1 ● 面包板*1 ● 9V方型…...
帝国cms电脑pc站url跳转到手机站url的方法
本文讲解一下帝国cms电脑网站跳转到手机动态网站和手机静态网站的方法,笔者以古诗词网 www.gushichi.com为例,为大家介绍操作步骤。方法一:帝国pc站跳转到手机静态站 1、假设我们有帝国cms 电脑网站www.XXX.com,手机网站m.XXX.com …...
Django models中的增删改查与MySQL SQL的对应关系
在 Django 中,models 提供了一种高层次的抽象来与数据库进行交互,使得开发者可以使用 Python 代码而非直接编写 SQL 来执行增删改查(CRUD)操作。下面将详细介绍 Django 的 ORM(对象关系映射)操作如何对应到…...
双指针——快乐数
一.题目描述 202. 快乐数 - 力扣(LeetCode) 二.题目解析 我们要判断一个数是不是快乐数要通过它的三个性质来进行判断。这个数会一直变化,由它的各个位的平方和重新构成这个数。如果这个数在变化的过程中变成了1,那么就是快乐数…...
Docker 默认安装位置迁移
一、找到 Docker 默认安装位置 [roothost-192-168-0-1 ~]# docker info Client:Version: 26.1.0Context: defaultDebug Mode: falseServer:Containers: 31Running: 31Paused: 0Stopped: 0Images: 128Server Version: 26.1.0Storage Driver: overlay2Backing Filesystem:…...
jmeter跨进程实现变量共享-全局变量
jmeter跨进程实现变量共享-全局变量 例如:登录一次,后面业务进行多线程并发场景 新增一个setUp线程组,在setUp线程组下,添加登录接口 使用json提取器,提取token Authorization $.token 0添加BeanShell 后置处理程序…...
Vue.js组件(6):echarts组件
1 前言 本章主要对常用的echars图表展示进行基本的组件封装。使用该组件前需要在项目中引入echarts。官网:Apache ECharts npm install echarts --save 2 图表组件 2.1 折线图组件 组件属性:chartId,指定图表挂载div的id,注意不…...
yolov3算法及其改进
yolov3算法及其改进 1、yolov3简介2、yolov3的改进2.1、backbone的改进2.1.1、darknet19相对于vgg16有更少的参数,同时具有更快的速度和更高的精度2.1.2、resnet101和darknet53,同样具有残差结构,精度也类似,但是darknet具有更高的速度2.2、FPN2.3、anchor-base与grid-cell…...
Python + 深度学习从 0 到 1(02 / 99)
希望对你有帮助呀!!💜💜 如有更好理解的思路,欢迎大家留言补充 ~ 一起加油叭 💦 欢迎关注、订阅专栏 【深度学习从 0 到 1】谢谢你的支持! ⭐ 手写数字分类: Keras MNIST 数据集 手写数字分类…...
HTML+CSS+JS制作在线书城网站(内附源码,含5个页面)
一、作品介绍 HTMLCSSJS制作一个在线书城网站,包含首页、分类页、排行榜页、新书上架页、特惠专区页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构 1. 顶部导航栏 包含网站Logo、搜索框、用户登录/注册入口、购物车图…...
【FastAPI】中间件
【FastAPI】中间件 一、概述二、作用2.1 日志记录与监控2.2 身份验证与授权2.3 CORS(跨域资源共享)2.4 Gzip压缩2.5 会话管理2.6 自定义功能2.7 执行顺序 三、 总结四、相关链接 一、概述 FastAPI的中间件提供了一种强大的机制,允许开发者在…...
5个实用的设计相关的AI网站
在这个日新月异的数字时代,我们不断面临着新的挑战和机遇。随着人工智能(AI)技术的飞速发展,越来越多的AI工具开始融入到设计相关的工作流程中,极大地提升了工作效率和创作能力。今天,我非常兴奋地向大家介…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
