uni-data-picker 实现省市区弹窗

原创已于 2022-07-25 16:54:01 修改 · 3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #java

于 2022-07-25 16:31:52 首次发布

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

uni-app

1 篇文章

订阅专栏

这篇博客介绍了如何在uni-app中利用uni-data-picker组件从本地JSON数据加载中国省市区县数据，实现地区选择的功能。通过在模板中插入组件并设置属性，结合JavaScript代码动态加载静态地址提供的JSON数据，实现了页面的地区选择交互。

以官网插件为例

官网地址：uni-app官网

代码：

<template>
	<view>
		<uni-data-picker :localdata="items" popup-title="请选择地区" @change="onchange" @nodeclick="onnodeclick">
		</uni-data-picker>
	</view>
</template>

import { address } from '@/static/address.js'	

export default {
		data() {
			return {
				items: []
			}
		},
		onLoad(){
			this.items = address
		},
}

json文件下载地址：GitHub - Anjinc188/chinaRegions: 🇨🇳最新中国【省、市、区县道】，包含港澳台地区详细数据 JSON``JS文件已整理/格式化