微信小程序：实现省市区三级联动

效果如下

 

代码如下

  
    
      姓名
      
    
  

    
      手机号码
      
    
 
    
      
        所在地区
        
          
            {
    {region[0]}} {
    {region[1]}} {
    {region[2]}}
          
        
      
      
        请选择
        
      
    

    
      佛语
      
    

  
    在线登记
  

 css代码如下

/*  */
.ipt-wrap{
  min-height: 100rpx;
  line-height: 100rpx;
}
.ipt-wrap label{
  min-width: 120rpx;
}
.icon-youjiantou{
  position: relative;
  top: 1rpx;
}
.textarea{
  height: 100rpx;
}
/*swtich样式-start*/
/*swtich整体大小*/
.wx-switch-input{
  width:82rpx !important;
  height:40rpx !important;
}
/*白色样式（false的样式）*/
.wx-switch-input::before{
  width:80rpx !important;
  height: 36rpx !important;
}
/*绿色样式（true的样式）*/
.wx-switch-input::after{
  width: 40rpx !important;
  height: 36rpx !important;
}
.ipt-wrap:last-child{
  border-bottom:none;
}
/*swtich样式end*/
.region{
  width: 500rpx;
  position: absolute;
  left: 150rpx;
}

js代码如下

const app = getApp();
Page({
  data: {
    elevatorFlag: 0,
    nameValue: '',
    phoneValue: '',
    foValue: '',
    region: ["省", "市", "区"],
    regionFlag: 1,
    // addressStatus: 0,
    // userID: 0
  },
  onLoad: function () {
    // let self = this;
    // this.setData({ userID: app.globalData.userID });
  },
  getNameValue: function (e) {
    this.setData({ nameValue: e.detail.value });
  },
  getPhoneValue: function (e) {
    this.setData({ phoneValue: e.detail.value });
  },
  getFoValue: function (e) {
    this.setData({ foValue: e.detail.value });
  },
  bindRegionChange: function (e) {
    this.setData({ region: e.detail.value, regionFlag: 0 });
  },
  saveNewAddress: function () {
     let self = this,
      regionFlag = self.data.regionFlag,//地址
      addressStatus = self.data.addressStatus,
      region = self.data.region,
      str = '';
    for (let i = 0, len = region.length; i < len; i++) {
      if (region[i].length == 1) { region[i] = region[i - 1]; }
      str += region[i] + ' ';
    }
    if (self.data.nameValue == "" || self.data.nameValue == 'None') {
      wx.showToast({
        title: '请输入姓名',
        icon: 'fail',
        duration: 2000
      })
      return;
    } else if (self.data.phoneValue.length!=11) {
      wx.showToast({
        title: '请输入正确的11位手机号码',
        icon: 'success',
        duration: 2000
      })
      return;
    } else if (self.data.regionFlag) {
      wx.showToast({
        title: '请选择省市区',
        icon: 'success',
        duration: 2000
      })
      return;
    }
    //把数据给云数据库
    const db = wx.cloud.database({});
    const cont = db.collection('gold');
    cont.add({
      data: {
        name: self.data.nameValue,
        tell: self.data.phoneValue,
        address: str,
        fo: self.data.foValue
      },
      success: function (res) {
        console.log(res._id)
        wx.showModal({
          title: '成功',
          content: '您已经登记成功',
          showCancel: false
        })
      }
    });
    //把数据给云数据库
  }
});