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


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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
浅谈js原生拖放
Nov 21 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
简述JS控制台的使用
Jul 15 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 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
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vuex入门最详细整理
2020/03/04 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python求质数列表的例子
2019/11/24 Python
python turtle 绘制太极图的实例
2019/12/18 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
jupyter notebook 重装教程
2020/04/16 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
四年大学自我鉴定
2014/02/17 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
民事代理词范文
2015/05/25 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js