当前位置: 首页 > 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;我非常兴奋地向大家介…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...