php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下
在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现。省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下。照例先上源码和效果图
源码传送门
picker和picker-view组件
在正式介绍实现之前,我们需要先来介绍下这两个组件,picker这个组件在前面的文章有简单介绍过,它是从底部弹起的滚动选择器,可以通过设置type的值来实现日期选择,时间选择以及普通的选择器,如果我们想实现上图三级联动地址选择效果,发现实现起来很困难,应该说是不能实现,因为picker普通选择器是只能有一列,如果想这实现三列的效果就需要另辟蹊径了。
既然是另辟蹊径,自然就会想到picker-view,该组件是一个嵌入页面的滚动选择器,该组件中可以放置多个picker-view-column,并且只能放置picker-view-column,其它组件是不会显示的,每一个picker-view-column就是一列。
picker-view有几个重要的属性,value是一个数组类型,数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。indicator-style和indicator-class可以设置选择器中间选中框的样式,他有一个事件bindchange,当我们滚动item时选择的item数据发生变化就会触发这个函数,并且可以通过event.detai.vaule(和上面介绍vaule含义相同)获取当前选择的是第几项(下标从 0 开始)。而对于picker-view-column高度会自动设置成与picker-view的选中框的高度一致。
省市县数据文件 存储了地址选择所需要用到的数据,主要是区域码和名字,然后通过下面代码将数据暴露出去,以供使用
module.exports = {
citys,
provinces,
areas
}
wxml文件实现
取消
确定
{{item.name}}
{{item.name}}
{{item.name}}
主要就是上面有一个取消和确定供用户点击确认选择,以及picker-view 中包含三个picker-view-column组件,分别对应显示省市区,provinces,citys,areas是对应的数据,animation是选择控件可见或者不可见时的过渡动画。
样式wxss文件
.picker-view {
width: 100%;
display: flex;
z-index:12;
background-color: #fff;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0rpx;
left: 0rpx;
height: 40vh;
}
.picker-item {
line-height: 70rpx;
margin-left: 5rpx;
margin-right: 5rpx;
text-align: center;
}
在js中我们在data中加入数据
/**
* 控件当前显示的数据
* provinces:所有省份
* citys 选择省对应的所有市,
* areas选择市对应的所有区
* areaInfo:点击确定时选择的省市县字符拼接
* animationAddressMenu:动画
* addressMenuIsShow:是否可见
*/
data: {
animationAddressMenu: {},
addressMenuIsShow: false,
value: [0, 0, 0],
provinces: [],
citys: [],
areas: [],
areaInfo:''
},
最重要的是在js文件开始处引入数据文件
var address = require('../../utils/city.js')
onLoad中初始化数据,默认显示北京
// 默认联动显示北京
var id = address.provinces[0].id
this.setData({
provinces: address.provinces,
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id],
})
事件的处理逻辑:
// 点击所在地区弹出选择框
selectDistrict: function (e) {
var that = this
// 如果已经显示,不在执行显示动画
if (that.data.addressMenuIsShow) {
return
}
// 执行显示动画
that.startAddressAnimation(true)
},
// 执行动画
startAddressAnimation: function (isShow) {
console.log(isShow)
var that = this
if (isShow) {
// vh是用来表示尺寸的单位,高度全屏是100vh
that.animation.translateY(0 + 'vh').step()
} else {
that.animation.translateY(40 + 'vh').step()
}
that.setData({
animationAddressMenu: that.animation.export(),
addressMenuIsShow: isShow,
})
},
// 点击地区选择取消按钮
cityCancel: function (e) {
this.startAddressAnimation(false)
},
// 点击地区选择确定按钮
citySure: function (e) {
var that = this
var city = that.data.city
var value = that.data.value
that.startAddressAnimation(false)
// 将选择的城市信息显示到输入框
var areaInfo = that.data.provinces[value[0]].name + ',' + that.data.citys[value[1]].name + ',' + that.data.areas[value[2]].name
that.setData({
areaInfo: areaInfo,
})
},
// 点击蒙版时取消组件的显示
hideCitySelected: function (e) {
console.log(e)
this.startAddressAnimation(false)
},
// 处理省市县联动逻辑
cityChange: function (e) {
console.log(e)
var value = e.detail.value
var provinces = this.data.provinces
var citys = this.data.citys
var areas = this.data.areas
var provinceNum = value[0]
var cityNum = value[1]
var countyNum = value[2]
// 如果省份选择项和之前不一样,表示滑动了省份,此时市默认是省的第一组数据,
if (this.data.value[0] != provinceNum) {
var id = provinces[provinceNum].id
this.setData({
value: [provinceNum, 0, 0],
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id],
})
} else if (this.data.value[1] != cityNum) {
// 滑动选择了第二项数据,即市,此时区显示省市对应的第一组数据
var id = citys[cityNum].id
this.setData({
value: [provinceNum, cityNum, 0],
areas: address.areas[citys[cityNum].id],
})
} else {
// 滑动选择了区
this.setData({
value: [provinceNum, cityNum, countyNum]
})
}
console.log(this.data)
},
对于事件处理,联动的处理逻辑,需要解释的我已在代码实现中做了解释,也没有什么比较难以理解的内容,就不在过多介绍,到这里微信小程序省市县三级联动效果已经实现了。
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享相关推荐
- 在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报 文章目录 在H5.微信小程序中使用canvas绘制二维码.分享海报 前言 一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
- 如何在微信小程序中集成认证服务—邮箱地址篇
近期华为AppGallary Connect的认证服务SDK新增支持了微信小程序.今天就来教大家如何在微信小程序中集成认证服务的邮箱地址认证方式 1.安装微信小程序环境 首先进入微信小程序官网下载微信 ...
- 实战演练-java+微信小程序实现省市区三级联动
最终效果图 官方的"省市区选择器"mode="region"里的数据是定死的由微信提供,不能做更改,好在同是picker组件mode="multiSe ...
- 微信小程序中处理 获取用户地址的回调
handleChooseAddress () {// 选择用户地址,初次调用该方法会弹出授权窗口,授权信息会被保存到 scope.address 属性中// 如果用户点击的是[取消],scope.ad ...
- 微信小程序中的添加收获地址的流程
1.添加收获地址的解析 1.首先我们要给添加收获地址设置点击事件2.然后在通过微信官方文档给我们提供的一个方法来进行添加本地存储3.判断本地里面是否有存在的内容,如果有的话显示内容,如果没有那么就显示 ...
- 微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
- 使用nginx反向代理在微信小程序中使用http请求
使用nginx反向代理在微信小程序中使用http请求 由于微信小程序对第三API的请求做了限制官方说明文档,导致我们无法访问非https的请求,然而我们在开发小程序过程中所请求的第三方接口不一定都是h ...
- 微信小程序中实现一个金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
- 在微信小程序中编写金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
最新文章
- JUC并发编程七 并发架构--wait/notify
- 编译过程中,termcap.h 文件找不到路径 licli.a终于生成
- standford lessons
- Application package 'AndroidManifest.xml' must have a minimum of 2 segments错误
- 第五章 随机事件及其概率
- 为什么说人工智能是一个大谎言
- Java笔记03-Constructor Override
- ubuntu 13.04 找回丢失的grub2
- kafka 修改分区_kafka修改分区和副本数
- react 解决 setState 异步问题
- 2021-2025年中国单相静态电能表行业市场供需与战略研究报告
- Google Chrome 初试手记
- L2Dwidget.js L2D网页动画人物添加
- 怎么实现多用户同时远程连接到一台电脑上
- ie8打完补丁重启报错
- 卫星对地观察模型系统操作说明
- 17SWFObject使用
- 基于Xilinx的FPGA下载配置详解及几种电路参考设计
- 微信公众号注册操作流程
- 神兽麒麟kylin驾驭指南
热门文章
- 总结一下安装linux系统经验-版本选择-安装ubuntu
- RTP/RTCP协议详解
- C#: Writing a CookieContainer to Disk and Loading Back In For Use
- python tornado 工程范例
- 采用组策略Loopback功能限制文件夹重定向路径
- 建立自动备份的维护计划
- 对多个有规律表进行更新剔重复操作的存储过程(up8000)
- python 学习总结----正则表达式
- AtCoder Regular Contest 082 (ARC082) E - ConvexScore 计算几何 计数
- 使用FileZilla连接Linux