uniapp 多级选择器

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

就简单的实现一下省市区多级联动选择

我这的省市区是根据三个不同的接口拿数据的

效果图

封装成组件

/**
 * 多级联动地址选择器
 */
<template>
	<view class="bigMorePicker" @touchmove.stop.prevent="()=>false" @tap="closePicker">
		<view class="morePickerCent" @tap.stop="()=>false">
			<view class="morePickerTitle">
				<view @tap="closePicker" style="color: #333;">取消</view>
				<view @tap="confirmPicker" style="color:#1aa034">确认</view>
			</view>
			<picker-view indicator-style="height: 50px;" :value="defaultValue" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in oneList" :key="index">{{item.name}}</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in twoList" :key="index">{{item.name}}</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in threeList" :key="index">{{item.name}}</view>
			    </picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'morePicker',
		data(){	
			return {}
		},
		props:{
			//第一列数据
			oneList:{
				type:Array,
				default(){
					[]
				}
			},
			//第二列数据
			twoList:{
				type:Array,
				default(){
					[]
				}
			},
			//第三列数据
			threeList:{
				type:Array,
				default(){
					[]
				}
			},
			//默认
			defaultValue:{
				type:Array,
				default(){
					[]
				}
			},
		},
		methods:{
			//变化
			bindChange(e) {
				this.$emit('morePickerChange',e);
				console.log(e)
			},
			//取消
			closePicker(){
				this.$emit('closeMorePicker')
			},
			//确认
			confirmPicker(){
				this.$emit('confirmMorePicker')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bigMorePicker{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
	}
	.morePickerCent{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		
	}
	.morePickerTitle{
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		border-bottom: #eee 2rpx solid;
	}
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}
	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>

调用页面

省市区里的每项数据必须有id和name

<more-picker 
        :oneList="provinces" 
        :twoList="citys" 
        :threeList="areas" 
        :defaultValue="defaultValue"
        @morePickerChange="morePickerChange" 
        @closeMorePicker="closeMorePicker" 
        @confirmMorePicker="confirmMorePicker" 
        v-if="isShowPicker">
</more-picker>

import morePicker from 'xxxxxxxxxx'

data(){	
        return {
                posiName:'暂无',//定位
                provinces:[],//省
                citys:[],//市
                areas:[],//区
                province:'',
                city:'',
                area:'',
                defaultValue: [0, 0, 0],//默认值
                isShowPicker: false,
        }
},
components:{
        morePicker
},
onLoad(){
	this.getProvinces()
},
methods:{
    //地址选择变化	
    morePickerChange(e){
            const val = e.detail.value;
            if(this.defaultValue[0] !== val[0]){
                    this.defaultValue = [val[0],0,0];//省变，后面的都默认选第一个
                    this.getProvinces();
            }else if(this.defaultValue[1] !== val[1]){
                    this.defaultValue = [val[0],val[1],0];//市变，后面的默认第一个
                    this.getCitys();
            }else{
                    this.defaultValue = val;
            }
    },
    //取消选取
    closeMorePicker(){
            this.isShowPicker = false;
    },
    //确认选取
    confirmMorePicker(){
            this.isShowPicker = false;
            //省
            if(this.provinces[this.defaultValue[0]].id){
                    this.province = this.provinces[this.defaultValue[0]].name;
            }
            //市
            if(this.citys[this.defaultValue[1]].id){
                    this.city = this.citys[this.defaultValue[1]].name;
            }else{
                    //没有市，就只有省
                    this.posiName = this.province;
                    return
            }

            //区/县
            if(this.areas[this.defaultValue[2]].id){
                    this.area = this.areas[this.defaultValue[2]].name;
                    this.posiName = this.area;
            }else{
                    //没有区/县，就只到市
                    this.posiName = this.city;
            }
    },
    //获取省
    async getProvinces(){
            let data = await this.$api.getProvinces();//我自己的请求省数据接口
            if(data.code == 1){
                    this.provinces = data.data;
                    this.getCitys();
            }else{
                    uni.showToast({
                            title:'省获取失败',
                            icon:'none'
                    })
            }
    },
    //获取市
    async getCitys(){
            let id = this.provinces[this.defaultValue[0]].id;
            let data = await this.$api.getCitys({province_id:id});//我自己的请求市数据接口
            if(data.code == 1){
                    data.data.unshift({id:'',name:'全部'});
                    this.citys = data.data;
                    this.getAreas();
            }else{
                    uni.showToast({
                            title:'市获取失败',
                            icon:'none'
                    })
            }
    },
    //获取区
    async getAreas(){
            let id = this.citys[this.defaultValue[1]].id;
            if(id){
                    let data = await this.$api.getAreas({city_id:id});//我自己的请求县/区数据接口
                    if(data.code == 1){
                            data.data.unshift({id:'',name:'全部'});
                            this.areas = data.data;
                    }else{
                            uni.showToast({
                                    title:'区/县获取失败',
                                    icon:'none'
                            })
                    }
            }else{
                    this.areas = []
            }
    },
}