小程序-三级联动地址、数据整理

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2016-12-13 18:28:56 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
由于微信小程序的picker只能选择一列,
1.png
那么要写三级联动的话就得写三个picker依次选择,稍稍有点麻烦。
所以我综合网上的数据整理了一份适合三级联动的全国省市区数据addressData.js。
使用时,只需在js里引入,模板里仿picker渲染即可。
效果图
2.png




代码:
wxml:
  1. <view class="picker-content" wx:if="{{showCity}}">
  2.         <view class="operate">
  3.             <span class="left" bindtap="cancel">取消</span>
  4.             <span class="right" bindtap="checkAddr">完成</span>
  5.         </view>
  6.         <view class="picker-area">
  7.             <view class="picker-left">
  8.                 <view>
  9.                     <block wx:for="{{filterdata.addressData.province}}">
  10.                         <view bindtap="checkProvince" data-index="{{index}}" class="padding {{pi==index ? 'active' : ''}}">{{item.name}}</view>
  11.                     </block>
  12.                 </view>
  13.             </view>
  14.             <view class="picker-middle">
  15.                 <view>
  16.                     <block wx:for="{{filterdata.addressData.province[pi].city}}">
  17.                         <view bindtap="checkCity" data-index="{{index}}" class="padding {{ci==index ? 'city-active' : ''}}">{{item.name}}</view>
  18.                     </block>
  19.                 </view>
  20.             </view>
  21.             <view class="picker-right">
  22.                 <view>
  23.                     <block wx:for="{{filterdata.addressData.province[pi].city[ci].area}}">
  24.                         <view bindtap="checkArea" data-index="{{index}}" class="padding {{ai==index ? 'city-active' : ''}}" >{{item.name}}</view>
  25.                     </block>
  26.                 </view>
  27.             </view>
  28.             <view class="clear"></view>
  29.         </view>
  30.     </view>
复制代码
js部分代码:
1.引入数据js
  1. var addressData =require( '../../common/addressData.js' )
复制代码
2.选择省市区方法
  1. checkProvince: function(e){
  2.            var index = e.target.dataset.index
  3.            var that = this
  4.            that.setData({
  5.                   pi: index,
  6.                   ci: 0,
  7.                   ai: 0
  8.            })
  9.     },

  10.     checkCity: function(e){
  11.            var index = e.target.dataset.index
  12.            var that = this
  13.            that.setData({
  14.                   ci: index,
  15.                   ai: 0
  16.            })
  17.     },

  18.     checkArea: function(e){
  19.            var index = e.target.dataset.index
  20.            var that = this
  21.            that.setData({
  22.                   ai: index
  23.            })
  24.     }
复制代码
3.最后,如果想让选择的地址显示出来,可以给“完成”按钮加上下面方法
  1. checkAddr: function(){
  2.             var that = this
  3.             var pi = parseInt(that.data.pi)
  4.             var ci = parseInt(that.data.ci)
  5.             var ai = parseInt(that.data.ai)

  6.             var p = addressData.addressData.province[pi].name
  7.             var c = addressData.addressData.province[pi].city[ci].name
  8.             var a = addressData.addressData.province[pi].city[ci].area[ai].name

  9.      that.setData({
  10.                    addrValue: p+c+a,
  11.                    showCity: false,
  12.                    showMask: false
  13.             })
  14. }
复制代码


请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名称:小程序-三级联动地址、数据整理.rar 
下载次数:0  文件大小:28.03 KB  售价:10浩币 [记录]
下载权限: 不限 以上或 荣誉会员   [赞助会员]   [充值浩币]


回复

使用道具 举报

精彩评论1

千山万水实名认证 手机认证 视频认证 发表于 2018-11-2 09:42:53 | 显示全部楼层
正需要,支持楼主大人了!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1