uni-app 本地省市区三级联动

效果图：

1.vue主要代码

template：

<template>
   <view class=”content”>
       <!– 居住信息 –>
       <view class=”item-address”>
           <view class=”addressCot”>
               <view class=”addressEdit”>
                   <view class=”texttitle”>选择地区：</view>
                   <view class=”input” type=”text” placeholder=”请选择地区”>
                       <picker class=”pickerList” mode=”multiSelector” :range=”newProvinceDataList” :value=”multiIndex”
                           @change=”pickerChange” @columnchange=”pickerColumnchange”>
                           <view class=””>{{select}}</view>
                       </picker>
                   </view>
               </view>
               <view class=”addressEdit”>
                   <view class=”texttitle”>居住村(小区) ：</view>
                   <input class=”inputcontent” v-model=”xiaoqu” placeholder=”请填写居住村(小区) 名称” />
               </view>
               <view class=”addressEdit2″>
                   <view class=”texttitle”>详细地址：</view>
                   <input class=”inputcontent” v-model=”details” placeholder=”请填写详细地址(门牌号)” />
               </view>
           </view>
       </view>
       <!– 修改按钮 –>
       <button class=”changeaddress” @click=”btnChangeAddress”>修改</button>
   </view>
</template>

2.script

           //确定修改居住信息
           btnChangeAddress: function() {
               var _this = this
               console.log(“地区 = ” + _this.select)
               console.log(“居住村（小区） = ” + _this.xiaoqu)
               console.log(“详细地址 = ” + _this.details)
               // uni.navigateBack({
               //    delta: 1
               // })
           },
           // 修改参与人居住地址
           changeCaseAddressP:function(){
               var _this = this
               if (_this.$WebUrl.isContentNet()) {
                   _this.$Control.getParticipantList({
                       cardNo:_this.changeCardNo,
                       participantId:_this.changeParticpantId,
                       liveProvince:””,
                       liveCity:””,
                       liveCounty:””,
                       liveRoad:””,
                       liveCun:””,
                       liveGroup:””
                   }).then(res => {
                       console.log(“修改参与人居住地址 res = ” + JSON.stringify(res.data))
                       if (res.data.code == 1000) {

                       } else if (res.data.code == 1002) { //跳转登录
                           uni.reLaunch({
                               url: “../loginActivity/loginActivity”
                           })
                       } else {
                           _this.$Control.requestError(res.data)
                       }

                   }).catch(err => {
                       console.log(“err activity = ” + JSON.stringify(err))
                   })
               } else {
                   uni.showToast({
                       title: “当前无网络，请检查您的网络链接”,
                       icon: “none”,
                       duration: 2000
                   })
               }
           },

       }
   }
</script>

3.style

   .inputcontent {
       color: #333333;
       font-size: 28rpx;
       flex-grow: 1;
       height: 80rpx;
   }

   .texttitle {
       color: #000000;
       font-size: 28rpx;
   }

   .addressEdit2 {
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 90%;
       min-height: 92rpx;
   }

   .addressEdit {
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 90%;
       min-height: 92rpx;
       border-bottom: 1rpx solid #DEDBDE;
   }

   .addressCot {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 100%;
   }

   .item-address {
       display: flex;
       flex-direction: column;
       justify-content: center;
       width: 90%;
       min-height: 120rpx;
       background-color: #FFFFFF;
       border-radius: 8rpx;
       margin-top: 30rpx;
       padding-top: 10rpx;
       padding-bottom: 10rpx;
   }

   .content {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 100%;
       height: 100%;
       background-color: #F0F4FC;
   }

   page {
       background-color: #F0F4FC;
   }
</style>

4.省市区本地数据provinceAndCity.js

调用：