更新记录
2.4(2020-05-19)
- 修复初始滑动出现市区两列空白问题
2.3(2020-05-07)
- 新增绑定默认地区类型可通过地区编码进行设置,优化默认地区定位方法
- 更改变量命名
2.1(2020-04-14)
- 避免没有设置默认地区时的错误抛出
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
省市区三级联动选择器(pick-regions)
简述
- 支持各省各市各区联动
- 支持提前绑定默认地区,(绑定方式包含传地区编码或地区名称数组)首次打开选择器定位到默认地区
- 支持获取地区包含地理编码
- 地区信息从本地一个json文件获取
组件属性和事件
属性名 |
类型 |
必填 |
默认值 |
说明 |
@getRegion |
EventHandle |
是 |
|
获取所选地区(包含地区名称和地区编码) |
defaultRegion |
String/Array |
否 |
|
设置默认地区 |
defaultRegion属性类型说明
可选任意一种类型设置默认地区
属性类型 |
说明 |
String |
地区编码 |
Array |
地区名称数组 |
使用示例
<template>
<view>
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
<h2>点击选择省市区</h2>
</pick-regions>
<h3>{{regionName}}</h3>
</view>
</template>
<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue'
export default {
components:{ pickRegions },
data(){
return {
region:[],
defaultRegion:['广东省','广州市','番禺区'],
defaultRegionCode:'440113'
}
},
computed:{
regionName(){
// 转为字符串
return this.region.map(item=>item.name).join(' ')
}
},
methods:{
// 获取选择的地区
handleGetRegion(region){
this.region = region
}
}
}
</script>
示例线上预览
https://jianjroh.gitee.io/uniapp_plug_in_development/#/pages/pick-regions/pick-regions
作者想说
有部分朋友反馈说初始化没用等等问题简单总结下原因
- 地区数据直接引用其它来源的数据,格式不对应
- 引用的地区数据格式对应,字段不对应
- 有些人修改字段的方式是通过逐个修改源码的字段
正确方式是通过一些JS方法处理你引入的地区数据达到两者格式和字段对应再替换插件本身的地区数据
给点建议
- 最后想给点建议的是多点使用控制变量法来找出异常。
- 从成功状态(示例项目)→单独添加你的每个逻辑(从中发现影响因素)→异常状态(你的应用)