更新记录
0.0.1(2024-10-11)
下载此版本
完成地市级选择。
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.28 |
× |
√ |
× |
× |
× |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
一.重要说明:
1.本插件基于uni-data-picker进行封装
★所以使用本插件前需要先安装uni-data-picker插件
地址:https://ext.dcloud.net.cn/plugin?name=uni-data-picker
2.采用静态文件记录了全国各省会地级市,县级市名称,不需数据库查询操作。
二.使用方法
1.通过hBuilder导入或下载zip文件,将 tk-cityPicker 文件夹,放入根目录的components文件夹下,目录结构可看右侧图片展示。
2.在需要引入的界面引入插件,示例如下:
<template>
<view class="content">
<tk-cityPicker ref="child"></tk-cityPicker>
<button @click="confirm">确定</button>
</view>
</template>
这里定义了个ref属性,是为了后续在本页面调用子组件中的方法,从而获取选择好的城市信息。
3.通过插件选择好城市后,调用插件方法,获取选择的城市。示例如下:
<script>
export default {
data() {
return {
}
},
methods: {
confirm() {
//这里调用子组件中的方法,获取选择好的城市信息
let city = this.$refs.child.getSelectedCity()
//这里会输出一个数组,开发者可自行根据需求处理获取后的逻辑
console.log(city)
}
}
}
</script>
4.插件方法
插件中,定义了一个方法,用于返回选择好的城市信息getSelectedCity()
例如上面实例中,通过console.log()
打印后得到如下信息:
(2) [{…}, {…}]
0:
text: "陕西省"
value: "120000"
1:
text: "延安市"
value: "120600"
开发者可通过处理这个数组中的数据,自行完善更多代码。