微信小程序三级联动地址选择器的实例代码


Posted in Javascript onJuly 12, 2017

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下
在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的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文件实现

<view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}">
 <view style="height:10% ;width:95%;margin-top:10rpx">
  <text catchtap="cityCancel">取消</text>
  <text style="float: right" catchtap="citySure">确定</text>
 </view>
 <picker-view style="width: 100%; height: 300px;" bindchange="cityChange" value="{{value}}" wx:key="">
  <picker-view-column>
   <view wx:for="{{provinces}}" class="picker-item">
    {{item.name}}</view>
  </picker-view-column>
  <picker-view-column>
   <view wx:for="{{citys}}" class="picker-item" wx:key="">
    {{item.name}}</view>
  </picker-view-column>
  <picker-view-column>
   <view wx:for="{{areas}}" class="picker-item" wx:key="">
    {{item.name}}</view>
  </picker-view-column>
 </picker-view>
</view>

主要就是上面有一个取消和确定供用户点击确认选择,以及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)
 },

对于事件处理,联动的处理逻辑,需要解释的我已在代码实现中做了解释,也没有什么比较难以理解的内容,就不在过多介绍,到这里微信小程序省市县三级联动效果已经实现了。

最后,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
微信小程序 共用变量值的实现
Jul 12 #Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 #Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 #Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 #Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 #Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 #Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
You might like
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php实现图片缩放功能类
2013/12/18 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python实现的矩阵类实例
2017/08/22 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
python在协程中增加任务实例操作
2021/02/28 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
记者岗位职责
2014/01/06 职场文书
企业管理培训感言
2014/01/27 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
财务统计员岗位职责
2015/04/14 职场文书
投标售后服务承诺书
2015/04/29 职场文书
党内外群众意见范文
2015/06/02 职场文书
食堂卫生管理制度
2015/08/04 职场文书
《学会看病》教学反思
2016/02/17 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技