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

微信小程序-基于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 省市区选择&#xff0c;省市区选择组件通常与 弹出层 组件配合使用。 areaList 格式 areaList 为对象结构&#xff0c;包含 province_list、city_list、county_list 三个 key。 每项以地区码作为 key&#xff0c;省市区名字作为 value。地区码为 6 位数字&#xff0c;前两…...

NIO(New IO)和BIO(Blocking IO)的区别

Java中的NIO&#xff08;New IO&#xff09;和BIO&#xff08;Blocking IO&#xff09;的区别及NIO的核心组件 Java中的NIO&#xff08;New IO&#xff09;和BIO&#xff08;Blocking IO&#xff09;是两种不同的网络通信模型&#xff0c;各自具有独特的特性和适用场景。下面将…...

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)

在游戏开发和机器人路径规划乃至于现在比较火的自动驾驶中&#xff0c;我们常常需要确定两个物体是否发生碰撞&#xff0c;有一种通过闵可夫斯基差集法求是否相交的算法&#xff0c;下面将介绍一下 闵可夫斯基差集法的优势 闵可夫斯基差集法优势&#xff1a; 可以处理复杂的…...

【唐叔学算法】第18天:解密选择排序的双重魅力-直接选择排序与堆排序的Java实现及性能剖析

引言 在数据排序的世界里&#xff0c;选择排序是一类简单而直观的算法&#xff0c;它通过不断选取未排序部分中的最小&#xff08;或最大&#xff09;元素来逐步构建有序序列。今天&#xff0c;我们将深入探讨两种基于选择思想的排序方法——直接选择排序和堆排序&#xff0c;…...

2008-2020年各省技术服务水平相关指标数据

2008-2020年各省技术服务水平相关指标数据 1.时间&#xff1a;2008-2020年 2.指标&#xff1a;行政区划代码、地区、年份、信息传输、软件和信息技术服务业城镇单位就业人员(万人)、软件业务收入(万元)、高技术产品出口额占商品出口额比重&#xff08;%&#xff09; 3.范围&…...

机器学习DAY4续:梯度提升与 XGBoost (完)

本文将通过 XGBoost 框架来实现回归、分类和排序任务&#xff0c;帮助理解和掌握使用 XGBoost 解决实际问题的能力。我们将从基本的数据处理开始&#xff0c;逐步深入到模型训练、评估以及预测。最后&#xff0c;将模型进行保存和加载训练好的模型。 知识点 回归任务分类任务…...

ML-Agents:训练配置文件(一)

注&#xff1a;本文章为官方文档翻译&#xff0c;如有侵权行为请联系作者删除 Training Configuration File - Unity ML-Agents Toolkit–原文链接 常见训练器配置 关于训练&#xff0c;您需要做出的首要决定之一是使用哪种训练器&#xff1a;PPO、SAC 还是 POCA。有些训练配置…...

【物联网技术与应用】 实验13:雨滴传感器实验

实验13 雨滴传感器实验 【实验介绍】 雨滴传感器或雨滴检测传感器用于检测是否下雨以及降雨。广泛应用于汽车的雨刷系统、智能照明系统和天窗系统。 【实验组件】 ● Arduino Uno主板* 1 ● USB数据线*1 ● 雨滴传感器* 1 ● 雨滴传感器调理板* 1 ● 面包板*1 ● 9V方型…...

帝国cms电脑pc站url跳转到手机站url的方法

本文讲解一下帝国cms电脑网站跳转到手机动态网站和手机静态网站的方法,笔者以古诗词网 www.gushichi.com为例&#xff0c;为大家介绍操作步骤。方法一&#xff1a;帝国pc站跳转到手机静态站 1、假设我们有帝国cms 电脑网站www.XXX.com&#xff0c;手机网站m.XXX.com &#xf…...

Django models中的增删改查与MySQL SQL的对应关系

在 Django 中&#xff0c;models 提供了一种高层次的抽象来与数据库进行交互&#xff0c;使得开发者可以使用 Python 代码而非直接编写 SQL 来执行增删改查&#xff08;CRUD&#xff09;操作。下面将详细介绍 Django 的 ORM&#xff08;对象关系映射&#xff09;操作如何对应到…...

双指针——快乐数

一.题目描述 202. 快乐数 - 力扣&#xff08;LeetCode&#xff09; 二.题目解析 我们要判断一个数是不是快乐数要通过它的三个性质来进行判断。这个数会一直变化&#xff0c;由它的各个位的平方和重新构成这个数。如果这个数在变化的过程中变成了1&#xff0c;那么就是快乐数…...

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跨进程实现变量共享-全局变量 例如&#xff1a;登录一次&#xff0c;后面业务进行多线程并发场景 新增一个setUp线程组&#xff0c;在setUp线程组下&#xff0c;添加登录接口 使用json提取器&#xff0c;提取token Authorization $.token 0添加BeanShell 后置处理程序…...

Vue.js组件(6):echarts组件

1 前言 本章主要对常用的echars图表展示进行基本的组件封装。使用该组件前需要在项目中引入echarts。官网&#xff1a;Apache ECharts npm install echarts --save 2 图表组件 2.1 折线图组件 组件属性&#xff1a;chartId&#xff0c;指定图表挂载div的id&#xff0c;注意不…...

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)

希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【深度学习从 0 到 1】谢谢你的支持&#xff01; ⭐ 手写数字分类: Keras MNIST 数据集 手写数字分类…...

HTML+CSS+JS制作在线书城网站(内附源码,含5个页面)

一、作品介绍 HTMLCSSJS制作一个在线书城网站&#xff0c;包含首页、分类页、排行榜页、新书上架页、特惠专区页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构 1. 顶部导航栏 包含网站Logo、搜索框、用户登录/注册入口、购物车图…...

【FastAPI】中间件

【FastAPI】中间件 一、概述二、作用2.1 日志记录与监控2.2 身份验证与授权2.3 CORS&#xff08;跨域资源共享&#xff09;2.4 Gzip压缩2.5 会话管理2.6 自定义功能2.7 执行顺序 三、 总结四、相关链接 一、概述 FastAPI的中间件提供了一种强大的机制&#xff0c;允许开发者在…...

5个实用的设计相关的AI网站

在这个日新月异的数字时代&#xff0c;我们不断面临着新的挑战和机遇。随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;越来越多的AI工具开始融入到设计相关的工作流程中&#xff0c;极大地提升了工作效率和创作能力。今天&#xff0c;我非常兴奋地向大家介…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

循环冗余码校验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…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

Bean 作用域有哪些?如何答出技术深度?

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类&#xff0c;直接把源文件拖进VS的项目里&#xff0c;然后VS卡住十秒&#xff0c;然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分&#xff0c;导致编译的时候找不到了。因…...