uniapp自定义联动查询，适用于接口查询

最新推荐文章于 2024-08-30 16:46:13 发布

鹿予岛

最新推荐文章于 2024-08-30 16:46:13 发布

阅读量601

点赞数

分类专栏： vue 文章标签： html5 vue

本文链接：https://blog.csdn.net/qq_41184533/article/details/116293685

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面代码，用了vant的弹窗，uniapp自带的picker-view

	<van-popup v-model="isshowArea" position="bottom" :style="{ height: '50%' }">
			<view class="popup">
				<view class="picker-btn">
					<view class="left" @click="cancel">取消</view>
					<view class="right" @click="affirm">确定</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindCityChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinceList[0]" :key="index">{{ item }}</view>             
					</picker-view-column>
					<picker-view-column v-if="this.provinceList[0][valueArr[0]]">
						<view class="item" v-for="(item,index) in provinceList[1][0]" :key="index">{{ item }}</view>        
					</picker-view-column>
					<picker-view-column v-if="this.provinceList[0][valueArr[0]]">
						<view class="item" v-for="(item,index) in provinceList[2][0]" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
	</van-popup>

样式

.popup {
	height: fit-content;
	width: 100%;
	background: #fff;
}

.picker-btn {
	display: flex;
	height: 100upx;
	width: 100%;
	line-height: 100upx;
	background: #fff;
	font-size: 34upx;
	z-index: 1;
	border-bottom: 1rpx solid #f8f8f8;

	.left {
		flex: 1;
		color: #0076FF;
		padding-left: 40upx;
		box-sizing: border-box;
	}

	.right {
		flex: 1;
		text-align: right;
		padding-right: 40upx;
		color: #FE4533;
		box-sizing: border-box;
	}
}

picker-view {
	width: 100%;
	height: 500rpx;
	display: relative;
}
.item {
	line-height: 100rpx;
	text-align: center;
}

data数据

data（）{
    return{
         dataItem: {
				province: "", // 省份
				city: "", // 城市
				area: "", // 地区
		 },
         indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
		valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列     		
		provinceList: [[],[],[]],
		province: '',
    }
}

方法

methods:{
    // 滚动触发的事件
    bindCityChange(e){
			const val = e.detail.value;
			console.log(e,val)
			if (this.valueArr[0] !== val[0]) { 
				this.loadCity(this.provinceList[0][val[0]])
			} else if (this.valueArr[1] !== val[1]) { 
				this.loadArea(this.provinceList[1][0][val[1]])	
			} else if (this.valueArr[2] !== val[2]) { 
				// console.log(this.provinceList[2][0][val[2]])							
			}
			this.valueArr = val
	},
	// 进入页面省份查询
	async initLoadArea(){
		let params = {} // 参数
		const data = await this.$get("接口地址XXX",params)
		this.provinceList[0] = data.result      
		await this.loadCity(data.result[0])
	},
		// 加载城市
			async loadCity(province) {
				this.province = province
				let params = {} // 参数
		       const data = await this.$get("接口地址XXX",params)
				var arr = []
					data.result.forEach(item => {
				  arr.push(item)
				})
				this.provinceList[1].splice(0, 1, arr)
				this.provinceList[1][0].unshift('请选择')
				await this.loadArea(data.result[0])
			},
			// 加载地区
			async loadArea(city) {
				let params = {} // 参数
		        const data = await this.$get("接口地址XXX",params)
				var arr = []
					data.result.forEach(item => {
				  arr.push(item)
				})
				this.provinceList[2].splice(0, 1, arr)
				this.provinceList[2][0].unshift('请选择')
				console.log('区域数据',this.provinceList[2])
			},
          // 确认按钮(地区)，获取选择的数据
			affirm(res) {
				console.log(this.valueArr)
				this.dataItem.province = this.provinceList[0][this.valueArr[0]]
				this.dataItem.city = this.provinceList[1][0][this.valueArr[1]]
				this.dataItem.area = this.provinceList[2][0][this.valueArr[2]]
			},
}