小程序的三级联动

其他 2019-04-23 15:31:24 阅读次数: 0

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

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

  • addressAdd.wxml
<view class="add-address">
  <view class="add-form">
    <view class="form-item">
      <input class="input" bindinput="bindinputName" placeholder="姓名" value="{{address.name}}" />
    </view>
    <view class="form-item">
      <input class="input" bindinput="bindinputMobile" value="{{address.mobile}}" placeholder="手机号码" />
    </view>
    <view class="form-item">
      <input class="input" bindinput="bindinputAddress" value="{{address.address}}" placeholder="详细地址" />
    </view>
    <view class="form-item"  bindtap='select'>
      <view class="weui-cell__bd">
        {{areaInfo}}
      </view>
    </view>

    <view class="form-default">
      <text bindtap="bindIsDefault" class="default-input {{address.isDefault == 1 ? 'selected' : ''}}">设为默认地址</text>
    </view>
  </view>

  <view class="btns">
    <button class="cannel" bindtap="cancelAddress">取消</button>
    <button class="save" bindtap="saveAddress">保存</button>
  </view>
</view>
<view class="bg-mask" bindtap="cancelSelectRegion" wx:if="{{openSelectRegion}}"></view>



<view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}">
  <!-- 确认取消按钮 -->
  <view class='btn'>
    <text catchtap="cityCancel">取消</text>
    <text style="float: right" catchtap="citySure">确定</text>
  </view>
  <!-- 选择地址 -->
  <picker-view class='cont' bindchange="cityChange" value="{{value}}" wx:key="">
    <!-- 省 -->
    <picker-view-column>
      <view wx:for="{{provinces}}" class="picker-item" wx:key="{{index}}">{{item.area}}</view>
    </picker-view-column>
    <!-- 市 -->
    <picker-view-column>
      <view wx:for="{{citys}}" class="picker-item" wx:key="index">{{item.area}}</view>
    </picker-view-column>
    <!-- 区 -->
    <picker-view-column>
      <view wx:for="{{areas}}" class="picker-item" wx:key="index">{{item.area}}</view>
    </picker-view-column>
  </picker-view>
</view>
  • addressAdd.wxss
page{
    height: 100%;
    background: #f4f4f4;
}
.add-address .add-form{
    background: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.add-address .form-item{
    height: 116rpx;
    padding-left: 31.25rpx;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    padding-right: 31.25rpx;
}

.add-address .input{
    flex: 1;
    height: 44rpx;
    line-height: 44rpx;
    overflow: hidden;
}

.add-address .form-default{
    border-bottom: 1px solid #d9d9d9;
    height: 96rpx;
    background: #fafafa;
    padding-top: 28rpx;
    font-size: 28rpx;
}

.default-input{
    margin: 0 auto;
    display: block;
    width: 240rpx;
    height: 40rpx;
    padding-left: 50rpx;
    line-height: 40rpx;
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 1rpx -448rpx no-repeat;
    background-size: 38rpx 486rpx;
    font-size: 28rpx;
}

.default-input.selected{
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 0 -192rpx no-repeat;
    background-size: 38rpx 486rpx;
}

.add-address .btns{
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    height: 100rpx;
    width: 100%;
}

.add-address .cannel,.add-address .save{
    flex: 1;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 28rpx;
    color: #fff;
    border:none;
    border-radius: 0;
}

.add-address .cannel{
    background: #3F3F3F;
}

.add-address .save{
    background: #a78845;
}


.region-select{
  width: 100%;
  height: 600rpx;
  background: #fff;
  position: fixed;
  z-index: 10;
  left:0;
  bottom: 0;
}

.region-select .hd{
  height: 108rpx;
  width: 100%;
  border-bottom: 1px solid #f4f4f4;
  padding: 46rpx 30rpx 0 30rpx;
}

.region-select .region-selected{
  float: left;
  height: 60rpx;
  display: flex;
}

.region-select .region-selected .item{
  max-width: 140rpx;
  margin-right: 30rpx;
  text-align: left;
  line-height: 60rpx;
  height: 100%;
  color: #333;
  font-size: 28rpx;
  overflow: hidden;
      text-overflow: ellipsis;
    white-space: nowrap;
}

.region-select .region-selected .item.disabled{
  color: #999;
}

.region-select .region-selected .item.selected{
  color: #a78845;
}

.region-select .done{
  float: right;
  height: 60rpx;
  width: 60rpx;
  border: none;
  background: #fff;
  line-height: 60rpx;
  text-align: center;
  color: #333;
  font-size: 28rpx;
}

.region-select .done.disabled{
  color: #999;
}

.region-select .bd{
  height: 492rpx;
  width: 100%;
  padding: 0 30rpx;
}

.region-select .region-list{
  height: 492rpx;
}

.region-select .region-list .item{
  width: 100%;
  height: 104rpx;
  line-height: 104rpx;
  text-align: left;
  color: #333;
  font-size: 28rpx;
}

.region-select .region-list .item.selected{
  color: #b4282d;
}


.bg-mask{
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top:0;
  left:0;
  z-index: 8;
}




.picker-view {
    width: 100%;
    display: flex;
    z-index:12;
    background-color: #fff;
    /* background: rgba(0, 0, 0, .2); */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0rpx;
    height: 40vh;
}
.btn {
    width: 100%;
    height: 90rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    line-height: 90rpx;
    text-align: center;
    display: flex;
    background: rgba(255,255,255,.8);
    justify-content: space-between;
}
.cont {
    width: 100%;
    height: 389rpx;
}
.picker-item {
    line-height: 70rpx;
    margin-left: 5rpx;
    margin-right: 5rpx;
    text-align: center;
}
.address {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-bottom: 1rpx solid #f1f1f1;
}
  • addressAdd.js (分两个版本一个是动态获取的 就是选择的时候动态向后台获取内容 下方是动态获取的例子：)
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');

var app = getApp();
Page({
  data: {
    addressId: 0,
    openSelectRegion: false,
    regionType: 1,
    selectRegionDone: false,
    szxqList: [],
    szxq: {
      id: "",
      name: "请选择小区"
    },
    szdsList: [],
    szds: {
      id: "",
      name: ""
    },
    fanghao: "",
    animationAddressMenu: {},
    addressMenuIsShow: false,
    value: [0, 0, 0],
    provinces: [],
    citys: [],
    areas: [],
    areaInfo: '',
    areaJson: {}
  },
  bindinputMobile(event) {
    let address = this.data.address;
    address.mobile = event.detail.value;
    this.setData({
      address: address
    });
  },
  bindinputName(event) {
    let address = this.data.address;
    address.name = event.detail.value;
    this.setData({
      address: address
    });
  },
  bindinputAddress(event) {
    let address = this.data.address;
    address.address = event.detail.value;
    this.setData({
      address: address
    });
  },
  bindIsDefault() {
    let address = this.data.address;
    address.isDefault = !address.isDefault;
    this.setData({
      address: address
    });
  },
  getAddressDetail() {
    let that = this;
    // util.request(api.AddressDetail, {
    //   id: that.data.addressId
    // }).then(function(res) {
    //   if (res.errno === 0) {
    //     if (res.data) {
    //       that.setData({
    //         address: res.data
    //       });
    //     }
    //   }
    // });
  },

  wxChooseAddress() {
    let that = this;
    let address = this.data.address;
    // 用户已经同意小程序使用地址功能
    wx.chooseAddress({
      success: function(res) {
        address.provinceId = 99999;
        address.cityId = 88888;
        address.areaId = 77777;
        address.name = res.userName;
        address.mobile = res.telNumber;
        address.provinceName = res.provinceName;
        address.cityName = res.cityName;
        address.areaName = res.countyName;
        address.address = res.provinceName + res.cityName + res.countyName + res.detailInfo;

        that.setData({
          address: address,
        });
      }
    });
  },

  wxAddress() {
    let that = this;
    // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.address" 这个 scope
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.address']) {
          wx.authorize({
            scope: 'scope.address',
            success() {
              that.wxChooseAddress();
            }
          })
        } else {
          that.wxChooseAddress();
        }
      }
    })
  },

  onLoad: function(options) {
    let that = this;
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options);
    if (options.id && options.id != 0) {
      this.setData({
        addressId: options.id
      });
      this.getAddressDetail();
    } else {
      that.wxAddress();
    }
  },


  onReady: function() {

  },

  cancelAddress() {
    wx.navigateBack();
  },
  saveAddress() {
    console.log(this.data.address);
    let address = this.data.address;

    if (address.name == '') {
      util.showErrorToast('请输入姓名');

      return false;
    }

    if (address.mobile == '') {
      util.showErrorToast('请输入手机号码');
      return false;
    }


    if (address.areaId == 0) {
      util.showErrorToast('请输入省市区');
      return false;
    }

    if (address.address == '') {
      util.showErrorToast('请输入详细地址');
      return false;
    }

    let that = this;

  },
  onShow: function() {

    // 获取所在栋数
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'linear',
    })
    this.animation = animation

    const that = this

    // 获取所在地区
    console.log()
    util.getAreaReq().then(provinces => {
      util.getAreaReq(provinces[0].code).then(citys => {
        util.getAreaReq(citys[0].code).then(areas => {

          that.setData({
            provinces: provinces,
            citys: citys,
            areas: areas,
            areaJson: {
              provinces: {
                id: 40,
                name: "广东省"
              },
              citys: {
                id: 4006,
                name: "河源市"
              },
              areas: {
                id: 400602,
                name: "源城区"
              }
            }
          })


          var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
          var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas


          that.setData({
            areaInfo: areaInfo,
          })
        })
      })
    })
   
  },

  // 点击所在地区弹出选择框
  select: function(e) {
    // 如果已经显示，不在执行显示动画
    if (this.data.addressMenuIsShow) {
      return false
    } else {
      // 执行显示动画
      this.startAddressAnimation(true)
    }
  },

  // 处理省市县联动逻辑
  cityChange: function(e) {
    // console.log(this.data.provinces)
    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]
    var that = this;
    // console.log(provinces)
    // 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
    if (this.data.value[0] != provinceNum) {
      var id = provinces[provinceNum].id
      // console.log(citys[cityNum])

      util.getAreaReq(provinces[provinceNum].code).then(citys => {
          util.getAreaReq(citys[0].code).then(areas => {

            this.setData({
              value: [provinceNum, 0, 0],
              citys: citys,
              areas: areas,
              areaJson: {
                provinces: {
                  id: provinces[provinceNum].code,
                  name: provinces[provinceNum].area
                },
                citys: {
                  id: citys[0].code,
                  name: citys[0].area
                },
                areas: {
                  id: areas.length > 0 ? areas[0].code : null,
                  name: areas.length > 0 ? areas[0].area : null,
                }
              }
            })
          })
        })


    } else if (this.data.value[1] != cityNum) {
      // 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
      var id = citys[cityNum].id

      util.getAreaReq(citys[cityNum].code).then(areas => {
          this.setData({
            value: [provinceNum, cityNum, 0],
            areas: areas,
            areaJson: {
              provinces: {
                id: provinces[provinceNum].code,
                name: provinces[provinceNum].area
              },
              citys: {
                id: citys[cityNum].code,
                name: citys[cityNum].area
              },
              areas: {
                id: areas.length > 0 ? areas[0].code : null,
                name: areas.length > 0 ? areas[0].area : null,
              }
            }
          })
       
        })

    } else {
      // 滑动选择了区

      this.setData({
        value: [provinceNum, cityNum, countyNum],
        areaJson: {
          provinces: {
            id: provinces[provinceNum].code,
            name: provinces[provinceNum].area
          },
          citys: {
            id: citys[cityNum].code,
            name: citys[cityNum].area
          },
          areas: {
            id: areas[countyNum].code,
            name: areas[countyNum].area
          }
        }
      })
      // console.log(that.data.areaJson)
    }
  },

  // 执行动画
  startAddressAnimation: function(isShow) {
    if (isShow) {
      // vh是用来表示尺寸的单位，高度全屏是100vh
      this.animation.translateY(0 + 'vh').step()
    } else {
      this.animation.translateY(40 + 'vh').step()
    }
    this.setData({
      animationAddressMenu: this.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
    this.startAddressAnimation(false)
    // console.log(that.data.areaJson)
    var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
    // 将选择的城市信息显示到输入框
    var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas


    that.setData({
      areaInfo: areaInfo,
    })
  },
  onHide: function() {
    // 页面隐藏

  },
  onUnload: function() {
    // 页面关闭

  }
});
  • 需要使用外部js（utils） 自己封装的一个工具
var api = require('../config/api.js');
var app = getApp();
var user = require('./user.js');

/**
 * 封装微信的的request
 */
function request(url, data = {}, method = "GET") {
  return new Promise(function(resolve, reject) {

    user.checkLogin().then(res => {

    }).catch(() => {
      wx.switchTab({
        url: '/pages/ucenter/index/index?show=true'
      });
    });

    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Cookie': "token=" + wx.getStorageSync('token') + ";" + wx.getStorageSync('sessionid'),
        'X-Requested-With': "XMLHttpRequest"
      },
      success: function(res) {
        if (res.statusCode == 400) {
          user.loginByWeixin().then(res => {
            app.globalData.hasLogin = true;

          });
          wx.redirectTo({
            url: '/pages/index/index'
          });
          wx.showToast({
            title: '已经重新登录',
          })
        }
        if (res.header["Set-Cookie"]) {
          wx.setStorageSync("sessionid", res.header["Set-Cookie"])
        }
        if (res.statusCode == 200) {

          if (res.data.errno == 501) {

          } else {
            resolve(res);
          }
        } else {

          reject(res);
        }

      },
      fail: function(err) {
        reject(err)
      }
    })
  });
}



function getAreaReq(id) {
  const that = this;
  return new Promise(function(resolve, reject) {
    that.request("****", JSON.stringify({
 
    }), "post").then(response => {
      console.log(response.data.rs_data)

      resolve(response.data.rs_data);

    })
  })
}


module.exports = {
  request,
  getAreaReq 
};
  • 使用静态获取的时候。js如下
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var area = require('../../../config/area.js');

var app = getApp();
Page({
  data: {
    address: {
      id: 0,
      provinceId: 0,
      cityId: 0,
      areaId: 0,
      address: '',
      name: '',
      mobile: '',
      isDefault: 0,
      provinceName: '',
      cityName: '',
      areaName: ''
    },
    addressId: 0,
    openSelectRegion: false,
    regionType: 1,
    selectRegionDone: false,
    szxqList: [],
    szxq: {
      id: "",
      name: "请选择小区"
    },
    szdsList: [],
    szds: {
      id: "",
      name: ""
    },
    fanghao: "",
    animationAddressMenu: {},
    addressMenuIsShow: false,
    value: [0, 0, 0],
    provinces: [],
    citys: [],
    areas: [],
    areaInfo: '',
    areaJson: {}
  },
  bindinputMobile(event) {
    let address = this.data.address;
    address.mobile = event.detail.value;
    this.setData({
      address: address
    });
  },
  bindinputName(event) {
    let address = this.data.address;
    address.name = event.detail.value;
    this.setData({
      address: address
    });
  },
  bindinputAddress(event) {
    let address = this.data.address;
    address.address = event.detail.value;
    this.setData({
      address: address
    });
  },
  bindIsDefault() {
    let address = this.data.address;
    address.isDefault = !address.isDefault;
    this.setData({
      address: address
    });
  },
  getAddressDetail() {
    let that = this;
    util.request(api.AddressDetail, {
      id: that.data.addressId
    }).then(function(res) {
      if (res.errno === 0) {
        if (res.data) {
          that.setData({
            address: res.data
          });
        }
      }
    });
  },

  wxChooseAddress() {
    let that = this;
    let address = this.data.address;
    // 用户已经同意小程序使用地址功能
    wx.chooseAddress({
      success: function(res) {
        address.provinceId = 99999;
        address.cityId = 88888;
        address.areaId = 77777;
        address.name = res.userName;
        address.mobile = res.telNumber;
        address.provinceName = res.provinceName;
        address.cityName = res.cityName;
        address.areaName = res.countyName;
        address.address = res.provinceName + res.cityName + res.countyName + res.detailInfo;

        that.setData({
          address: address,
        });
      }
    });
  },

  wxAddress() {
    let that = this;
    // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.address" 这个 scope
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.address']) {
          wx.authorize({
            scope: 'scope.address',
            success() {
              that.wxChooseAddress();
            }
          })
        } else {
          that.wxChooseAddress();
        }
      }
    })
  },

  onLoad: function(options) {
    let that = this;
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options);
    if (options.id && options.id != 0) {
      this.setData({
        addressId: options.id
      });
      this.getAddressDetail();
    } else {
      that.wxAddress();
    }
  },


  onReady: function() {

  },

  cancelAddress() {
    wx.navigateBack();
  },
  saveAddress() {
    console.log(this.data.address);
    let address = this.data.address;

    if (address.name == '') {
      util.showErrorToast('请输入姓名');

      return false;
    }

    if (address.mobile == '') {
      util.showErrorToast('请输入手机号码');
      return false;
    }


    if (address.areaId == 0) {
      util.showErrorToast('请输入省市区');
      return false;
    }

    if (address.address == '') {
      util.showErrorToast('请输入详细地址');
      return false;
    }

    if (!check.isValidPhone(address.mobile)) {
      util.showErrorToast('手机号不正确');
      return false;
    }
  },
  onShow: function() {

    // 获取所在栋数
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'linear',
    })
    this.animation = animation



    util.request("https://www.xaibox.com/czbb/interface/dataInfo.php", JSON.stringify({
      "param_key": {
        "info_mode": "getcity_jd"
      },
      "secret_key": "047709aaa7df22205d818bf4c1707458"
    }), "post").then(response => {
      console.log(response)

      that.setData({
        szxqList: response.data.rs_data
      })
      that.setData({
        szxq: response.data.data[0]
      })
      that.setData({
        szds: response.data.data[0]['buildingList']['0']
      })
      that.setData({
        szdsList: response.data.data[0]['buildingList']
      })

    })
    // 获取所在地区



    that.setData({
      provinces: areajs,
      citys: areajs[0].children,
      areas: areajs[0].children ? areajs[0].children[0].children : [],
      areaJson: {
        provinces: {
          id: 40,
          name: "广东省"
        },
        citys: {
          id: 4006,
          name: "河源市"
        },
        areas: {
          id: 400602,
          name: "源城区"
        }
      }
    })


    var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
    var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas


    that.setData({
      areaInfo: areaInfo,
    })
  },

  // 点击所在地区弹出选择框
  select: function(e) {
    // 如果已经显示，不在执行显示动画
    if (this.data.addressMenuIsShow) {
      return false
    } else {
      // 执行显示动画
      this.startAddressAnimation(true)
    }
  },

  // 处理省市县联动逻辑
  cityChange: function(e) {
    // console.log(this.data.provinces)
    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]
    var that = this;
    // console.log(provinces)
    // 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
    if (this.data.value[0] != provinceNum) {
      var id = provinces[provinceNum].id
      // console.log(citys[cityNum])
      this.setData({
        value: [provinceNum, 0, 0],
        citys: provinces[provinceNum].children,
        areas: provinces[provinceNum].children ? provinces[provinceNum].children[0].children : [],
        areaJson: {
          provinces: {
            id: provinces[provinceNum].code,
            name: provinces[provinceNum].area
          },
          citys: {
            id: provinces[provinceNum].children[0].code,
            name: provinces[provinceNum].children[0].area
          },
          areas: {
            id: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].code : null,
            name: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].area : null
          }
        }
      })


    } else if (this.data.value[1] != cityNum) {
      // 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
      var id = citys[cityNum].id

      this.setData({
        value: [provinceNum, cityNum, 0],
        areas: citys[cityNum].children,
        areaJson: {
          provinces: {
            id: provinces[provinceNum].code,
            name: provinces[provinceNum].area
          },
          citys: {
            id: citys[cityNum].code,
            name: citys[cityNum].area
          },
          areas: {
            id: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].code : null,
            name: citys[cityNum].children.length > 0 ? citys[cityNum].children[0].area : null
          }
        }
      })
    } else {
      // 滑动选择了区

      this.setData({
        value: [provinceNum, cityNum, countyNum],
        areaJson: {
          provinces: {
            id: provinces[provinceNum].code,
            name: provinces[provinceNum].area
          },
          citys: {
            id: citys[cityNum].code,
            name: citys[cityNum].area
          },
          areas: {
            id: areas[countyNum].code,
            name: areas[countyNum].area
          }
        }
      })
      // console.log(that.data.areaJson)
    }
  },

  // 执行动画
  startAddressAnimation: function(isShow) {
    if (isShow) {
      // vh是用来表示尺寸的单位，高度全屏是100vh
      this.animation.translateY(0 + 'vh').step()
    } else {
      this.animation.translateY(40 + 'vh').step()
    }
    this.setData({
      animationAddressMenu: this.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
    this.startAddressAnimation(false)
    // console.log(that.data.areaJson)
    var areas = that.data.areaJson.areas.name == null ? "" : that.data.areaJson.areas.name
    // 将选择的城市信息显示到输入框
    var areaInfo = that.data.areaJson.provinces.name + '·' + that.data.areaJson.citys.name + '·' + areas

    that.setData({
      areaInfo: areaInfo,
    })
  },
  onHide: function() {
    // 页面隐藏

  },
  onUnload: function() {
    // 页面关闭

  }
});
  • 静态获取三级联动 的话则需要文件area.js点击下载

猜你喜欢

转载自www.cnblogs.com/rolandlee/p/10756542.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022