经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现三级联动代码
来源：cnblogs　　作者：不会敲代码的老王　　时间：2019/4/24 10:01:56　　对本文有异议

项目中经常遇到要选择城市。用到三级联动的方式

  • 微信小程序的 picker 组件 mode=date 是三级联动的，但是无法自定义，这让我们心痛不已，值得我们欣慰的 picker-view 组件是可以自定义添加多个选项，但还是无法联动。既然这样那就自己写一个联动。
  • 做到如下图所示：
  • 分为动态获取地址
  • 引用静态文件获取地址

  • addressAdd.wxml
  1. <view class="add-address">
  2.   <view class="add-form">
  3.     <view class="form-item">
  4.       <input class="input" bindinput="bindinputName" placeholder="姓名" value="{{address.name}}" />
  5.     </view>
  6.     <view class="form-item">
  7.       <input class="input" bindinput="bindinputMobile" value="{{address.mobile}}" placeholder="手机号码" />
  8.     </view>
  9.     <view class="form-item">
  10.       <input class="input" bindinput="bindinputAddress" value="{{address.address}}" placeholder="详细地址" />
  11.     </view>
  12.     <view class="form-item"  bindtap='select'>
  13.       <view class="weui-cell__bd">
  14.         {{areaInfo}}
  15.       </view>
  16.     </view>
  18.     <view class="form-default">
  19.       <text bindtap="bindIsDefault" class="default-input {{address.isDefault == 1 ? 'selected' : ''}}">设为默认地址</text>
  20.     </view>
  21.   </view>
  23.   <view class="btns">
  24.     <button class="cannel" bindtap="cancelAddress">取消</button>
  25.     <button class="save" bindtap="saveAddress">保存</button>
  26.   </view>
  27. </view>
  28. <view class="bg-mask" bindtap="cancelSelectRegion" wx:if="{{openSelectRegion}}"></view>
  32. <view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}">
  33.   <!-- 确认取消按钮 -->
  34.   <view class='btn'>
  35.     <text catchtap="cityCancel">取消</text>
  36.     <text style="float: right" catchtap="citySure">确定</text>
  37.   </view>
  38.   <!-- 选择地址 -->
  39.   <picker-view class='cont' bindchange="cityChange" value="{{value}}" wx:key="">
  40.     <!-- 省 -->
  41.     <picker-view-column>
  42.       <view wx:for="{{provinces}}" class="picker-item" wx:key="{{index}}">{{item.area}}</view>
  43.     </picker-view-column>
  44.     <!-- 市 -->
  45.     <picker-view-column>
  46.       <view wx:for="{{citys}}" class="picker-item" wx:key="index">{{item.area}}</view>
  47.     </picker-view-column>
  48.     <!-- 区 -->
  49.     <picker-view-column>
  50.       <view wx:for="{{areas}}" class="picker-item" wx:key="index">{{item.area}}</view>
  51.     </picker-view-column>
  52.   </picker-view>
  53. </view>
  • addressAdd.wxss
  1. page{
  2.     height: 100%;
  3.     background: #f4f4f4;
  4. }
  5. .add-address .add-form{
  6.     background: #fff;
  7.     width: 100%;
  8.     height: auto;
  9.     overflow: hidden;
  10. }
  12. .add-address .form-item{
  13.     height: 116rpx;
  14.     padding-left: 31.25rpx;
  15.     border-bottom: 1px solid #d9d9d9;
  16.     display: flex;
  17.     align-items: center;
  18.     padding-right: 31.25rpx;
  19. }
  21. .add-address .input{
  22.     flex: 1;
  23.     height: 44rpx;
  24.     line-height: 44rpx;
  25.     overflow: hidden;
  26. }
  28. .add-address .form-default{
  29.     border-bottom: 1px solid #d9d9d9;
  30.     height: 96rpx;
  31.     background: #fafafa;
  32.     padding-top: 28rpx;
  33.     font-size: 28rpx;
  34. }
  36. .default-input{
  37.     margin: 0 auto;
  38.     display: block;
  39.     width: 240rpx;
  40.     height: 40rpx;
  41.     padding-left: 50rpx;
  42.     line-height: 40rpx;
  43.     background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 1rpx -448rpx no-repeat;
  44.     background-size: 38rpx 486rpx;
  45.     font-size: 28rpx;
  46. }
  48. .default-input.selected{
  49.     background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 0 -192rpx no-repeat;
  50.     background-size: 38rpx 486rpx;
  51. }
  53. .add-address .btns{
  54.     position: fixed;
  55.     bottom: 0;
  56.     left: 0;
  57.     overflow: hidden;
  58.     display: flex;
  59.     height: 100rpx;
  60.     width: 100%;
  61. }
  63. .add-address .cannel,.add-address .save{
  64.     flex: 1;
  65.     height: 100rpx;
  66.     text-align: center;
  67.     line-height: 100rpx;
  68.     font-size: 28rpx;
  69.     color: #fff;
  70.     border:none;
  71.     border-radius: 0;
  72. }
  74. .add-address .cannel{
  75.     background: #3F3F3F;
  76. }
  78. .add-address .save{
  79.     background: #a78845;
  80. }
  83. .region-select{
  84.   width: 100%;
  85.   height: 600rpx;
  86.   background: #fff;
  87.   position: fixed;
  88.   z-index: 10;
  89.   left:0;
  90.   bottom: 0;
  91. }
  93. .region-select .hd{
  94.   height: 108rpx;
  95.   width: 100%;
  96.   border-bottom: 1px solid #f4f4f4;
  97.   padding: 46rpx 30rpx 0 30rpx;
  98. }
  100. .region-select .region-selected{
  101.   float: left;
  102.   height: 60rpx;
  103.   display: flex;
  104. }
  106. .region-select .region-selected .item{
  107.   max-width: 140rpx;
  108.   margin-right: 30rpx;
  109.   text-align: left;
  110.   line-height: 60rpx;
  111.   height: 100%;
  112.   color: #333;
  113.   font-size: 28rpx;
  114.   overflow: hidden;
  115.       text-overflow: ellipsis;
  116.     white-space: nowrap;
  117. }
  119. .region-select .region-selected .item.disabled{
  120.   color: #999;
  121. }
  123. .region-select .region-selected .item.selected{
  124.   color: #a78845;
  125. }
  127. .region-select .done{
  128.   float: right;
  129.   height: 60rpx;
  130.   width: 60rpx;
  131.   border: none;
  132.   background: #fff;
  133.   line-height: 60rpx;
  134.   text-align: center;
  135.   color: #333;
  136.   font-size: 28rpx;
  137. }
  139. .region-select .done.disabled{
  140.   color: #999;
  141. }
  143. .region-select .bd{
  144.   height: 492rpx;
  145.   width: 100%;
  146.   padding: 0 30rpx;
  147. }
  149. .region-select .region-list{
  150.   height: 492rpx;
  151. }
  153. .region-select .region-list .item{
  154.   width: 100%;
  155.   height: 104rpx;
  156.   line-height: 104rpx;
  157.   text-align: left;
  158.   color: #333;
  159.   font-size: 28rpx;
  160. }
  162. .region-select .region-list .item.selected{
  163.   color: #b4282d;
  164. }
  167. .bg-mask{
  168.   height: 100%;
  169.   width: 100%;
  170.   background: rgba(0, 0, 0, 0.4);
  171.   position: fixed;
  172.   top:0;
  173.   left:0;
  174.   z-index: 8;
  175. }
  180. .picker-view {
  181.     width: 100%;
  182.     display: flex;
  183.     z-index:12;
  184.     background-color: #fff;
  185.     /* background: rgba(0, 0, 0, .2); */
  186.     flex-direction: column;
  187.     justify-content: center;
  188.     align-items: center;
  189.     position: fixed;
  190.     bottom: 0;
  191.     left: 0rpx;
  192.     height: 40vh;
  193. }
  194. .btn {
  195.     width: 100%;
  196.     height: 90rpx;
  197.     padding: 0 24rpx;
  198.     box-sizing: border-box;
  199.     line-height: 90rpx;
  200.     text-align: center;
  201.     display: flex;
  202.     background: rgba(255,255,255,.8);
  203.     justify-content: space-between;
  204. }
  205. .cont {
  206.     width: 100%;
  207.     height: 389rpx;
  208. }
  209. .picker-item {
  210.     line-height: 70rpx;
  211.     margin-left: 5rpx;
  212.     margin-right: 5rpx;
  213.     text-align: center;
  214. }
  215. .address {
  216.     width: 100%;
  217.     height: 90rpx;
  218.     line-height: 90rpx;
  219.     text-align: center;
  220.     border-bottom: 1rpx solid #f1f1f1;
  221. }
  • addressAdd.js (分两个版本一个是动态获取的 就是选择的时候动态向后台获取内容 下方是动态获取的例子：)
  1. var util = require('../../../utils/util.js');
  2. var api = require('../../../config/api.js');
  4. var app = getApp();
  5. Page({
  6.   data: {
  7.     addressId: 0,
  8.     openSelectRegion: false,
  9.     regionType: 1,
  10.     selectRegionDone: false,
  11.     szxqList: [],
  12.     szxq: {
  13.       id: "",
  14.       name: "请选择小区"
  15.     },
  16.     szdsList: [],
  17.     szds: {
  18.       id: "",
  19.       name: ""
  20.     },
  21.     fanghao: "",
  22.     animationAddressMenu: {},
  23.     addressMenuIsShow: false,
  24.     value: [0, 0, 0],
  25.     provinces: [],
  26.     citys: [],
  27.     areas: [],
  28.     areaInfo: '',
  29.     areaJson: {}
  30.   },
  31.   bindinputMobile(event) {
  32.     let address = this.data.address;
  33.     address.mobile = event.detail.value;
  34.     this.setData({
  35.       address: address
  36.     });
  37.   },
  38.   bindinputName(event) {
  39.     let address = this.data.address;
  40.     address.name = event.detail.value;
  41.     this.setData({
  42.       address: address
  43.     });
  44.   },
  45.   bindinputAddress(event) {
  46.     let address = this.data.address;
  47.     address.address = event.detail.value;
  48.     this.setData({
  49.       address: address
  50.     });
  51.   },
  52.   bindIsDefault() {
  53.     let address = this.data.address;
  54.     address.isDefault = !address.isDefault;
  55.     this.setData({
  56.       address: address
  57.     });
  58.   },
  59.   getAddressDetail() {
  60.     let that = this;
  61.     // util.request(api.AddressDetail, {
  62.     //   id: that.data.addressId
  63.     // }).then(function(res) {
  64.     //   if (res.errno === 0) {
  65.     //     if (res.data) {
  66.     //       that.setData({
  67.     //         address: res.data
  68.     //       });
  69.     //     }
  70.     //   }
  71.     // });
  72.   },
  74.   wxChooseAddress() {
  75.     let that = this;
  76.     let address = this.data.address;
  77.     // 用户已经同意小程序使用地址功能
  78.     wx.chooseAddress({
  79.       success: function(res) {
  80.         address.provinceId = 99999;
  81.         address.cityId = 88888;
  82.         address.areaId = 77777;
  83.         address.name = res.userName;
  84.         address.mobile = res.telNumber;
  85.         address.provinceName = res.provinceName;
  86.         address.cityName = res.cityName;
  87.         address.areaName = res.countyName;
  88.         address.address = res.provinceName + res.cityName + res.countyName + res.detailInfo;
  90.         that.setData({
  91.           address: address,
  92.         });
  93.       }
  94.     });
  95.   },
  97.   wxAddress() {
  98.     let that = this;
  99.     // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.address" 这个 scope
  100.     wx.getSetting({
  101.       success(res) {
  102.         if (!res.authSetting['scope.address']) {
  103.           wx.authorize({
  104.             scope: 'scope.address',
  105.             success() {
  106.               that.wxChooseAddress();
  107.             }
  108.           })
  109.         } else {
  110.           that.wxChooseAddress();
  111.         }
  112.       }
  113.     })
  114.   },
  116.   onLoad: function(options) {
  117.     let that = this;
  118.     // 页面初始化 options为页面跳转所带来的参数
  119.     console.log(options);
  120.     if (options.id && options.id != 0) {
  121.       this.setData({
  122.         addressId: options.id
  123.       });
  124.       this.getAddressDetail();
  125.     } else {
  126.       that.wxAddress();
  127.     }
  128.   },
  131.   onReady: function() {
  133.   },
  135.   cancelAddress() {
  136.     wx.navigateBack();
  137.   },
  138.   saveAddress() {
  139.     console.log(this.data.address);
  140.     let address = this.data.address;
  142.     if (address.name == '') {
  143.       util.showErrorToast('请输入姓名');
  145.       return false;
  146.     }
  148.     if (address.mobile == '') {
  149.       util.showErrorToast('请输入手机号码');
  150.       return false;
  151.     }
  154.     if (address.areaId == 0) {
  155.       util.showErrorToast('请输入省市区');
  156.       return false;
  157.     }
  159.     if (address.address == '') {
  160.       util.showErrorToast('请输入详细地址');
  161.       return false;
  162.     }
  164.     let that = this;
  166.   },
  167.   onShow: function() {
  169.     // 获取所在栋数
  170.     var animation = wx.createAnimation({
  171.       duration: 500,
  172.       timingFunction: 'linear',
  173.     })
  174.     this.animation = animation
  176.     const that = this
  178.     // 获取所在地区
  179.     console.log()
  180.     util.getAreaReq().then(provinces => {
  181.       util.getAreaReq(provinces[0].code).then(citys => {
  182.         util.getAreaReq(citys[0].code).then(areas => {
  184.           that.setData({
  185.             provinces: provinces,
  186.             citys: citys,
  187.             areas: areas,
  188.             areaJson: {
  189.               provinces: {
  190.                 id: 40,
  191.                 name: "广东省"
  192.               },
  193.               citys: {
  194.                 id: 4006,
  195.                 name: "河源市"
  196.               },
  197.               areas: {
  198.                 id: 400602,
  199.                 name: "源城区"
  200.               }
  201.             }
  202.           })
  205.           var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
  206.           var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas
  209.           that.setData({
  210.             areaInfo: areaInfo,
  211.           })
  212.         })
  213.       })
  214.     })
  215.    
  216.   },
  218.   // 点击所在地区弹出选择框
  219.   select: function(e) {
  220.     // 如果已经显示，不在执行显示动画
  221.     if (this.data.addressMenuIsShow) {
  222.       return false
  223.     } else {
  224.       // 执行显示动画
  225.       this.startAddressAnimation(true)
  226.     }
  227.   },
  229.   // 处理省市县联动逻辑
  230.   cityChange: function(e) {
  231.     // console.log(this.data.provinces)
  232.     var value = e.detail.value
  233.     var provinces = this.data.provinces
  234.     var citys = this.data.citys
  235.     var areas = this.data.areas
  236.     var provinceNum = value[0]
  237.     var cityNum = value[1]
  238.     var countyNum = value[2]
  239.     var that = this;
  240.     // console.log(provinces)
  241.     // 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
  242.     if (this.data.value[0] != provinceNum) {
  243.       var id = provinces[provinceNum].id
  244.       // console.log(citys[cityNum])
  246.       util.getAreaReq(provinces[provinceNum].code).then(citys => {
  247.           util.getAreaReq(citys[0].code).then(areas => {
  249.             this.setData({
  250.               value: [provinceNum, 0, 0],
  251.               citys: citys,
  252.               areas: areas,
  253.               areaJson: {
  254.                 provinces: {
  255.                   id: provinces[provinceNum].code,
  256.                   name: provinces[provinceNum].area
  257.                 },
  258.                 citys: {
  259.                   id: citys[0].code,
  260.                   name: citys[0].area
  261.                 },
  262.                 areas: {
  263.                   id: areas.length > 0 ? areas[0].code : null,
  264.                   name: areas.length > 0 ? areas[0].area : null,
  265.                 }
  266.               }
  267.             })
  268.           })
  269.         })
  272.     } else if (this.data.value[1] != cityNum) {
  273.       // 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
  274.       var id = citys[cityNum].id
  276.       util.getAreaReq(citys[cityNum].code).then(areas => {
  277.           this.setData({
  278.             value: [provinceNum, cityNum, 0],
  279.             areas: areas,
  280.             areaJson: {
  281.               provinces: {
  282.                 id: provinces[provinceNum].code,
  283.                 name: provinces[provinceNum].area
  284.               },
  285.               citys: {
  286.                 id: citys[cityNum].code,
  287.                 name: citys[cityNum].area
  288.               },
  289.               areas: {
  290.                 id: areas.length > 0 ? areas[0].code : null,
  291.                 name: areas.length > 0 ? areas[0].area : null,
  292.               }
  293.             }
  294.           })
  295.        
  296.         })
  298.     } else {
  299.       // 滑动选择了区
  301.       this.setData({
  302.         value: [provinceNum, cityNum, countyNum],
  303.         areaJson: {
  304.           provinces: {
  305.             id: provinces[provinceNum].code,
  306.             name: provinces[provinceNum].area
  307.           },
  308.           citys: {
  309.             id: citys[cityNum].code,
  310.             name: citys[cityNum].area
  311.           },
  312.           areas: {
  313.             id: areas[countyNum].code,
  314.             name: areas[countyNum].area
  315.           }
  316.         }
  317.       })
  318.       // console.log(that.data.areaJson)
  319.     }
  320.   },
  322.   // 执行动画
  323.   startAddressAnimation: function(isShow) {
  324.     if (isShow) {
  325.       // vh是用来表示尺寸的单位，高度全屏是100vh
  326.       this.animation.translateY(0 + 'vh').step()
  327.     } else {
  328.       this.animation.translateY(40 + 'vh').step()
  329.     }
  330.     this.setData({
  331.       animationAddressMenu: this.animation.export(),
  332.       addressMenuIsShow: isShow,
  333.     })
  334.   },
  335.   // 点击地区选择取消按钮
  336.   cityCancel: function(e) {
  337.     this.startAddressAnimation(false)
  338.   },
  339.   // 点击地区选择确定按钮
  340.   citySure: function(e) {
  341.     var that = this
  342.     var city = that.data.city
  343.     var value = that.data.value
  344.     this.startAddressAnimation(false)
  345.     // console.log(that.data.areaJson)
  346.     var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
  347.     // 将选择的城市信息显示到输入框
  348.     var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas
  351.     that.setData({
  352.       areaInfo: areaInfo,
  353.     })
  354.   },
  355.   onHide: function() {
  356.     // 页面隐藏
  358.   },
  359.   onUnload: function() {
  360.     // 页面关闭
  362.   }
  363. });
  • 需要使用外部js（utils） 自己封装的一个工具
  1. var api = require('../config/api.js');
  2. var app = getApp();
  3. var user = require('./user.js');
  5. /**
  6.  * 封装微信的的request
  7.  */
  8. function request(url, data = {}, method = "GET") {
  9.   return new Promise(function(resolve, reject) {
  11.     user.checkLogin().then(res => {
  13.     }).catch(() => {
  14.       wx.switchTab({
  15.         url: '/pages/ucenter/index/index?show=true'
  16.       });
  17.     });
  19.     wx.request({
  20.       url: url,
  21.       data: data,
  22.       method: method,
  23.       header: {
  24.         'Content-Type': 'application/x-www-form-urlencoded',
  25.         'Cookie': "token=" + wx.getStorageSync('token') + ";" + wx.getStorageSync('sessionid'),
  26.         'X-Requested-With': "XMLHttpRequest"
  27.       },
  28.       success: function(res) {
  29.         if (res.statusCode == 400) {
  30.           user.loginByWeixin().then(res => {
  31.             app.globalData.hasLogin = true;
  33.           });
  34.           wx.redirectTo({
  35.             url: '/pages/index/index'
  36.           });
  37.           wx.showToast({
  38.             title: '已经重新登录',
  39.           })
  40.         }
  41.         if (res.header["Set-Cookie"]) {
  42.           wx.setStorageSync("sessionid", res.header["Set-Cookie"])
  43.         }
  44.         if (res.statusCode == 200) {
  46.           if (res.data.errno == 501) {
  48.           } else {
  49.             resolve(res);
  50.           }
  51.         } else {
  53.           reject(res);
  54.         }
  56.       },
  57.       fail: function(err) {
  58.         reject(err)
  59.       }
  60.     })
  61.   });
  62. }
  66. function getAreaReq(id) {
  67.   const that = this;
  68.   return new Promise(function(resolve, reject) {
  69.     that.request("****", JSON.stringify({
  70.  
  71.     }), "post").then(response => {
  72.       console.log(response.data.rs_data)
  74.       resolve(response.data.rs_data);
  76.     })
  77.   })
  78. }
  81. module.exports = {
  82.   request,
  83.   getAreaReq 
  84. };
  • 使用静态获取的时候。js如下
  1. var util = require('../../../utils/util.js');
  2. var api = require('../../../config/api.js');
  3. var area = require('../../../config/area.js');
  5. var app = getApp();
  6. Page({
  7.   data: {
  8.     address: {
  9.       id: 0,
  10.       provinceId: 0,
  11.       cityId: 0,
  12.       areaId: 0,
  13.       address: '',
  14.       name: '',
  15.       mobile: '',
  16.       isDefault: 0,
  17.       provinceName: '',
  18.       cityName: '',
  19.       areaName: ''
  20.     },
  21.     addressId: 0,
  22.     openSelectRegion: false,
  23.     regionType: 1,
  24.     selectRegionDone: false,
  25.     szxqList: [],
  26.     szxq: {
  27.       id: "",
  28.       name: "请选择小区"
  29.     },
  30.     szdsList: [],
  31.     szds: {
  32.       id: "",
  33.       name: ""
  34.     },
  35.     fanghao: "",
  36.     animationAddressMenu: {},
  37.     addressMenuIsShow: false,
  38.     value: [0, 0, 0],
  39.     provinces: [],
  40.     citys: [],
  41.     areas: [],
  42.     areaInfo: '',
  43.     areaJson: {}
  44.   },
  45.   bindinputMobile(event) {
  46.     let address = this.data.address;
  47.     address.mobile = event.detail.value;
  48.     this.setData({
  49.       address: address
  50.     });
  51.   },
  52.   bindinputName(event) {
  53.     let address = this.data.address;
  54.     address.name = event.detail.value;
  55.     this.setData({
  56.       address: address
  57.     });
  58.   },
  59.   bindinputAddress(event) {
  60.     let address = this.data.address;
  61.     address.address = event.detail.value;
  62.     this.setData({
  63.       address: address
  64.     });
  65.   },
  66.   bindIsDefault() {
  67.     let address = this.data.address;
  68.     address.isDefault = !address.isDefault;
  69.     this.setData({
  70.       address: address
  71.     });
  72.   },
  73.   getAddressDetail() {
  74.     let that = this;
  75.     util.request(api.AddressDetail, {
  76.       id: that.data.addressId
  77.     }).then(function(res) {
  78.       if (res.errno === 0) {
  79.         if (res.data) {
  80.           that.setData({
  81.             address: res.data
  82.           });
  83.         }
  84.       }
  85.     });
  86.   },
  88.   wxChooseAddress() {
  89.     let that = this;
  90.     let address = this.data.address;
  91.     // 用户已经同意小程序使用地址功能
  92.     wx.chooseAddress({
  93.       success: function(res) {
  94.         address.provinceId = 99999;
  95.         address.cityId = 88888;
  96.         address.areaId = 77777;
  97.         address.name = res.userName;
  98.         address.mobile = res.telNumber;
  99.         address.provinceName = res.provinceName;
  100.         address.cityName = res.cityName;
  101.         address.areaName = res.countyName;
  102.         address.address = res.provinceName + res.cityName + res.countyName + res.detailInfo;
  104.         that.setData({
  105.           address: address,
  106.         });
  107.       }
  108.     });
  109.   },
  111.   wxAddress() {
  112.     let that = this;
  113.     // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.address" 这个 scope
  114.     wx.getSetting({
  115.       success(res) {
  116.         if (!res.authSetting['scope.address']) {
  117.           wx.authorize({
  118.             scope: 'scope.address',
  119.             success() {
  120.               that.wxChooseAddress();
  121.             }
  122.           })
  123.         } else {
  124.           that.wxChooseAddress();
  125.         }
  126.       }
  127.     })
  128.   },
  130.   onLoad: function(options) {
  131.     let that = this;
  132.     // 页面初始化 options为页面跳转所带来的参数
  133.     console.log(options);
  134.     if (options.id && options.id != 0) {
  135.       this.setData({
  136.         addressId: options.id
  137.       });
  138.       this.getAddressDetail();
  139.     } else {
  140.       that.wxAddress();
  141.     }
  142.   },
  145.   onReady: function() {
  147.   },
  149.   cancelAddress() {
  150.     wx.navigateBack();
  151.   },
  152.   saveAddress() {
  153.     console.log(this.data.address);
  154.     let address = this.data.address;
  156.     if (address.name == '') {
  157.       util.showErrorToast('请输入姓名');
  159.       return false;
  160.     }
  162.     if (address.mobile == '') {
  163.       util.showErrorToast('请输入手机号码');
  164.       return false;
  165.     }
  168.     if (address.areaId == 0) {
  169.       util.showErrorToast('请输入省市区');
  170.       return false;
  171.     }
  173.     if (address.address == '') {
  174.       util.showErrorToast('请输入详细地址');
  175.       return false;
  176.     }
  178.     if (!check.isValidPhone(address.mobile)) {
  179.       util.showErrorToast('手机号不正确');
  180.       return false;
  181.     }
  182.   },
  183.   onShow: function() {
  185.     // 获取所在栋数
  186.     var animation = wx.createAnimation({
  187.       duration: 500,
  188.       timingFunction: 'linear',
  189.     })
  190.     this.animation = animation
  194.     util.request("https://www.xaibox.com/czbb/interface/dataInfo.php", JSON.stringify({
  195.       "param_key": {
  196.         "info_mode": "getcity_jd"
  197.       },
  198.       "secret_key": "047709aaa7df22205d818bf4c1707458"
  199.     }), "post").then(response => {
  200.       console.log(response)
  202.       that.setData({
  203.         szxqList: response.data.rs_data
  204.       })
  205.       that.setData({
  206.         szxq: response.data.data[0]
  207.       })
  208.       that.setData({
  209.         szds: response.data.data[0]['buildingList']['0']
  210.       })
  211.       that.setData({
  212.         szdsList: response.data.data[0]['buildingList']
  213.       })
  215.     })
  216.     // 获取所在地区
  220.     that.setData({
  221.       provinces: areajs,
  222.       citys: areajs[0].children,
  223.       areas: areajs[0].children ? areajs[0].children[0].children : [],
  224.       areaJson: {
  225.         provinces: {
  226.           id: 40,
  227.           name: "广东省"
  228.         },
  229.         citys: {
  230.           id: 4006,
  231.           name: "河源市"
  232.         },
  233.         areas: {
  234.           id: 400602,
  235.           name: "源城区"
  236.         }
  237.       }
  238.     })
  241.     var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
  242.     var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas
  245.     that.setData({
  246.       areaInfo: areaInfo,
  247.     })
  248.   },
  250.   // 点击所在地区弹出选择框
  251.   select: function(e) {
  252.     // 如果已经显示，不在执行显示动画
  253.     if (this.data.addressMenuIsShow) {
  254.       return false
  255.     } else {
  256.       // 执行显示动画
  257.       this.startAddressAnimation(true)
  258.     }
  259.   },
  261.   // 处理省市县联动逻辑
  262.   cityChange: function(e) {
  263.     // console.log(this.data.provinces)
  264.     var value = e.detail.value
  265.     var provinces = this.data.provinces
  266.     var citys = this.data.citys
  267.     var areas = this.data.areas
  268.     var provinceNum = value[0]
  269.     var cityNum = value[1]
  270.     var countyNum = value[2]
  271.     var that = this;
  272.     // console.log(provinces)
  273.     // 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
  274.     if (this.data.value[0] != provinceNum) {
  275.       var id = provinces[provinceNum].id
  276.       // console.log(citys[cityNum])
  277.       this.setData({
  278.         value: [provinceNum, 0, 0],
  279.         citys: provinces[provinceNum].children,
  280.         areas: provinces[provinceNum].children ? provinces[provinceNum].children[0].children : [],
  281.         areaJson: {
  282.           provinces: {
  283.             id: provinces[provinceNum].code,
  284.             name: provinces[provinceNum].area
  285.           },
  286.           citys: {
  287.             id: provinces[provinceNum].children[0].code,
  288.             name: provinces[provinceNum].children[0].area
  289.           },
  290.           areas: {
  291.             id: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].code : null,
  292.             name: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].area : null
  293.           }
  294.         }
  295.       })
  298.     } else if (this.data.value[1] != cityNum) {
  299.       // 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
  300.       var id = citys[cityNum].id
  302.       this.setData({
  303.         value: [provinceNum, cityNum, 0],
  304.         areas: citys[cityNum].children,
  305.         areaJson: {
  306.           provinces: {
  307.             id: provinces[provinceNum].code,
  308.             name: provinces[provinceNum].area
  309.           },
  310.           citys: {
  311.             id: citys[cityNum].code,
  312.             name: citys[cityNum].area
  313.           },
  314.           areas: {
  315.             id: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].code : null,
  316.             name: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].area : null
  317.           }
  318.         }
  319.       })
  320.     } else {
  321.       // 滑动选择了区
  323.       this.setData({
  324.         value: [provinceNum, cityNum, countyNum],
  325.         areaJson: {
  326.           provinces: {
  327.             id: provinces[provinceNum].code,
  328.             name: provinces[provinceNum].area
  329.           },
  330.           citys: {
  331.             id: citys[cityNum].code,
  332.             name: citys[cityNum].area
  333.           },
  334.           areas: {
  335.             id: areas[countyNum].code,
  336.             name: areas[countyNum].area
  337.           }
  338.         }
  339.       })
  340.       // console.log(that.data.areaJson)
  341.     }
  342.   },
  344.   // 执行动画
  345.   startAddressAnimation: function(isShow) {
  346.     if (isShow) {
  347.       // vh是用来表示尺寸的单位，高度全屏是100vh
  348.       this.animation.translateY(0 + 'vh').step()
  349.     } else {
  350.       this.animation.translateY(40 + 'vh').step()
  351.     }
  352.     this.setData({
  353.       animationAddressMenu: this.animation.export(),
  354.       addressMenuIsShow: isShow,
  355.     })
  356.   },
  357.   // 点击地区选择取消按钮
  358.   cityCancel: function(e) {
  359.     this.startAddressAnimation(false)
  360.   },
  361.   // 点击地区选择确定按钮
  362.   citySure: function(e) {
  363.     var that = this
  364.     var city = that.data.city
  365.     var value = that.data.value
  366.     this.startAddressAnimation(false)
  367.     // console.log(that.data.areaJson)
  368.     var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
  369.     // 将选择的城市信息显示到输入框
  370.     var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas
  372.     that.setData({
  373.       areaInfo: areaInfo,
  374.     })
  375.   },
  376.   onHide: function() {
  377.     // 页面隐藏
  379.   },
  380.   onUnload: function() {
  381.     // 页面关闭
  383.   }
  384. });
  • 静态获取三级联动 的话则需要文件area.js点击下载

原文链接：http://www.cnblogs.com/rolandlee/p/10756542.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号