uniapp取后台数据实现省市区三级联动

实现这个功能，我们先看官方文档，的picker-view组件，这个案例是再这个组件的基础上做修改而来，还有看一下官方的uni-popup组件，直接操作

1.先下载好popup弹出层插件，下载地址：uni-popup 弹出层 - DCloud 插件市场

 下载这个两个，为什么呢，我说明一下，直接下载插件ZIP，里面有组件缺少，不完整，导致其他组件不能使用，这个插件是一整体使用，不能拆分使用，下载好插件ZIP打开是这样的

我们直接打开components文件夹，把里面的所有东西拷贝到你项目的components下

 我们看文档介绍和图中可以看出，少一个组件，uni-transition

 我们再下载他的示例项目

下载好，直接进入到uni_modules文件夹，把uni-transition这个组件拷贝到你项目的components下，到这里呢，我们准备的组件就完成了

2.把组件注册到我们的项目中，文档写不清楚，故意留坑好让你找他们，100马内1个问题，经历过，好，废话不多说，这个组件大多页面都用得到，所有本文章配置的是全局，打开我们项目的main.js文件，再里面加上，注册格式：import uniTransition from  组件的路径

import uniTransition from "@/components/uni-transition/uni-transition"
import uniPopup from "@/components/uni-popup/uni-popup"
import uniPopupDialog from "@/components/uni-popup-dialog/uni-popup-dialog"
import uniPopupMessage from "@/components/uni-popup-message/uni-popup-message"
import uniPopupShare from "@/components/uni-popup-share/uni-popup-share"


Vue.component('uniTransition', uniTransition)
Vue.component('uniPopup', uniPopup)
Vue.component('uniPopupDialog', uniPopupDialog)
Vue.component('uniPopupMessage', uniPopupMessage)
Vue.component('uniPopupShare', uniPopupShare)

3.联动代码

<view class="content" >
					<input type="tel" disabled="true" :value="addInfo" @click="bindPickerChange()">
				</view>
<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="picker-btn">
					<view class="left" @click="close">取消</view>
					<view class="right" @click="confirm">确定</view>
				</view>
				<picker-view :indicator-style="bootStyle" :value="selectList" @change="selectData">
					<picker-view-column>
						<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="province[selectList[0]]">
						<view class="item" v-for="(item,index) in citylist" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="citylist[selectList[0]]">
						<view class="item" v-for="(item,index) in arealist" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

创建运用的值

addInfo:"请选择省市区",    //显示用的：广东省 广州市 天河区
				bootStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				selectList: [0, 0, 0], //第一个元素表示滑动省列表，以此类推
				province: [], // 省列表
				citylist:[],	//市列表
				arealist:[],	//区列表

//打开地址
			bindPickerChange: function(e) {
				//加载省
				this.loadRegionList(1,1);
				this.$refs.popup.open();
			},
//选择地址确定按钮事件
			confirm() {
				var main = this;
				var sheng = "";	//省
				var city = "";	//市
				var area = "";	//区
				if(main.province){
					sheng = main.province[main.selectList[0]].name;
				}
				if(main.citylist){
					city = main.citylist[main.selectList[1]].name;
				}
				if(main.arealist){
					area = main.arealist[main.selectList[2]].name;
				}
				var value = sheng;
				if(city){
					value += " " + city;
				}
				if(area){
					value += " " + area;
				}
				main.addInfo = value;
				main.$refs.popup.close()
			},
bindChange(e) {
				const val = e.detail.value;
				console.log(val);
				if (this.valueArr[0] !== val[0]) {
					this.loadRegionList(this.province[val[0]].id,2)
				} else if (this.valueArr[1] !== val[1]) {
					this.loadRegionList(this.citylist[val[1]].id,3)
				}
				this.valueArr = val;
			},
//请求的后台接口获取数据的方法，这个根据自己的接口写
//定义两个参数pip表示省市id，type表示获取的是省，市，区，1：省 2:市 3：区
loadRegionList:function(pid,type){
				const self = this;
				uni.request({
					url: urlConfig + "/address/getRegionList",
					method:"GET",
					data:{
						pid:pid    //表示id，省市id
					},
					success:function(res){
						if(res.data.code == 200){
							if(type == 1){
								self.province = res.data.extend.list;    //放到省数组
							}else if(type == 2){
								self.citylist = res.data.extend.list;    //放到市数组
							}else{
								self.arealist = res.data.extend.list;    //放到区数组
							}
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000
							});
						}
					},fail:function(error){
						uni.showToast({
							icon:error,
						    title: '网络链接错误',
						    duration: 2000
						});
					}
				})
			},
//关闭地址选择
			close() {
				this.$refs.popup.close()    //直接拷贝文档的代码
			},
selectData(e) {
				const val = e.detail.value;
				console.log(val);
				if (this.selectList[0] !== val[0]) {
					this.loadRegionList(this.province[val[0]].id,2)
				} else if (this.selectList[1] !== val[1]) {
					this.loadRegionList(this.citylist[val[1]].id,3)
				}
				this.selectList= val;
			},

就怎么多了，不用其他好的插件，干净利落，不载入太多没用的其他文件

接一个效果图

转发请注明来源 :https://blog.csdn.net/u012673806/article/details/121595415