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


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 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
微信小程序实现弹出层效果
May 26 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
简述Vue中容易被忽视的知识点
Dec 09 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
php数组去重的函数代码
2013/02/03 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php常用图片处理类
2016/03/16 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Django添加feeds功能的示例
2018/08/07 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
kafka-python批量发送数据的实例
2018/12/27 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
家长给小学生的评语
2014/01/30 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
实习生矿工检讨书
2014/10/13 职场文书
学校师德师风整改方案
2014/10/28 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
PHP RabbitMQ消息列队
2022/05/11 PHP