uniApp picker-view自定义选择省市区

已于 2023-06-05 11:12:07 修改
阅读量2.6k 收藏 4
点赞数 1
分类专栏： uniapp写app转接总结 文章标签： uni-app javascript 前端
于 2023-03-16 11:46:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_1307495/article/details/129582650
版权

uniapp写app之picker-view自定义选择省市区

新建组件pick-adress

pick-adress

通过uniapp提供的组件picker-view和picker-view-column做一个滚动的时间选择弹框

// An highlighted block
<template>
	<view class="">
		<!-- 支付按钮 -->
		<view class="pay_popup" :class="isOpen ? 'on' : ''">
			<view class="pay-title flex-sb-cent">
				<button class="btn" @click="onClose">取消</button>
				<button class="btn" @click="onSubmit">完成</button>
			</view>
			<view class="">
				<picker-view :value="idxArr" @change="bindChange" class="picker-view"
				 indicator-class="picker-box">
					<picker-view-column >
						<view class="item" v-for="(item,index) in provinceArray" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cityArray" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column v-if="isDistrictY">
						<view class="item" v-for="(item,index) in districtArray" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>

			</view>			
		</view>
		<view class="mask" v-if="isOpen" @click="onClose"></view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import addressData from '@/config/address.js'
	export default {
		props: {
			isOpen: {
				default: false,
				type: Boolean
			},
			
			isDistrictY: {// 判断是否选择区域数据true表示选择false表示不显示
				default: true,
				type: Boolean
			}
		},
		data () {
			return {
				title: 'picker-view',
				area1_name: '',
				area2_name: '',
				area3_name: '',
				area1_code: '',
				area2_code: '',
				area3_code: '',
				idxArr: [0,0,0],
				oldpProvinceDataList: addressData,
				provinceArray: [],
				cityArray: [],
				districtArray: [],
				column1: 0,
				column2: 0,
				column3: 0,
				// indicatorStyle: `height: 50px;`
			}
		},
		created() {
			for(let i=0; i<this.oldpProvinceDataList.length; i++){
				this.provinceArray.push(this.oldpProvinceDataList[i]);
			}
			for(let i=0; i<this.oldpProvinceDataList[0].children.length; i++){
				this.cityArray.push(this.oldpProvinceDataList[0].children[i]);
			}
			this.area1_name = this.provinceArray[0].label
			this.area2_name = this.cityArray[0].label
			this.area1_code = this.provinceArray[0].value
			this.area2_code = this.cityArray[0].value
			if (!this.isDistrictY) return
			for(let i=0; i<this.oldpProvinceDataList[0].children[0].children.length; i++){
				this.districtArray.push(this.oldpProvinceDataList[0].children[0].children[i]);
			}
			this.area3_name = this.districtArray[0].label
			this.area3_code = this.districtArray[0].value
		},
		
		methods: {
			pickerColumnchange(){
				let idxArr = this.idxArr
				if (this.oldpProvinceDataList[idxArr[0]].children&& this.oldpProvinceDataList[idxArr[0]].children.length>0) {
					this.cityArray = this.oldpProvinceDataList[idxArr[0]].children.map((item,index)=>{
						return item
					})
				}
				if (!this.isDistrictY) return
				if(this.oldpProvinceDataList[idxArr[0]].children && this.oldpProvinceDataList[idxArr[0]].children.length>0 &&
				this.oldpProvinceDataList[idxArr[0]].children[idxArr[1]].children && idxArr.length == 3){
					this.districtArray = this.oldpProvinceDataList[idxArr[0]].children[idxArr[1]].children.map((item,index)=>{
						return item
					})
				} else{
					this.idxArr[2] = 0
					this.districtArray = []
				}
			},
			bindChange: function (e) {
				const val = e.detail.value
				if (this.column1 !== val[0]) {
					this.column1 = val[0]
					this.column2 = 0
					this.column3 = 0
				} else if (this.column2 !== val[1]){
					this.column1 = val[0]
					this.column2 = val[1]
					this.column3 = 0
				} else {
					this.column1 = val[0]
					this.column2 = val[1]
					this.column3 = val[2]
				}
				
				this.idxArr = [this.column1,this.column2,this.column3]
				this.pickerColumnchange()
				if (this.provinceArray.length>0) {
					this.area1_name = this.provinceArray[this.column1].label
					this.area1_code = this.provinceArray[this.column1].value
				}
				if (this.cityArray.length>0) {
					this.area2_name = this.cityArray[this.column2].label
					this.area2_code = this.cityArray[this.column2].value
				} else {
					this.area2_name = ''
					this.area2_code = ''
				}
				if (!this.isDistrictY) return
				if (this.districtArray.length>0) {
					this.area3_name = this.districtArray[this.column3].label
					this.area3_code = this.districtArray[this.column3].value
				} else {
					this.area3_name = ''
					this.area3_code = ''
				}
			},
			onClose() {
				this.$emit('close',1)
			},
			onSubmit() {
				let data = {
					area1_name: this.area1_name,
					area2_name: this.area2_name,
					area3_name: this.area3_name,
					area1_code: this.area1_code,
					area2_code: this.area2_code,
					area3_code: this.area3_code,
				}
				this.$emit('bindChage',data)
			},
		}
	}
</script>

<style lang="less" scoped>
.pay_popup {
	.body-title {
		font-size: 36rpx;
		color: #666;
		text-align: center;
		padding-bottom: 12rpx;
		
	}
	.pay-title {
		border-bottom: none;
		padding: 0 32rpx;
		.btn {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #C90F07;
			line-height: 32rpx;
		}
	}
}
.picker-view {
	width: 100%;
	height: 432rpx;
	padding: 0 32rpx;
	.picker-box {
		// width: 686px;
		height: 80rpx;
		background: #C90F07;
		font-weight: 500;
		color: #45454C;
		line-height: 80rpx;
		opacity: 0.12;
	}
	uni-picker-view-column {
		&:first-child {
			.picker-box {
				border-top-left-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
			}
		}
		&:last-child {
			.picker-box {
				border-top-right-radius: 16rpx;
				border-bottom-right-radius: 16rpx;
			}
		}
	}
}
.item {
	height: 80rpx;
	line-height: 80rpx;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #45454C !important;
	font-size: 36rpx;
	font-family: PingFang SC;
}


</style>

</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		props: {
			isOpen: {
				default: false,
				type: Boolean
			},
			modelValue: {// 选择时间格式 yyyy-MM-dd
				default: '',
				type: String
			},
			isGreaterY: { // 是否选择年月日，y 表示选择年月日，n 表示选择年月
				default: 'n',
				type: String
			}
		},
		data () {
			
			return {
				title: 'picker-view',
				years: [],
				year: '',
				months: [],
				month: '',
				days: [],
				day: '',
				value: [],
				// indicatorStyle: `height: 50px;`
			}
		},
		created() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			if (this.isGreaterY=='n') {
				for (let i = 1990; i <= date.getFullYear(); i++) {
					years.push(i)
				}
				this.value = [9999,month-1,day-1]
			} else {
				for (let i = date.getFullYear()+100; i >= date.getFullYear(); i--) {
					years.unshift(i)
				}
				this.value = [0,month-1,day-1]
			}
			
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			// 设置默认选择时间
			this.years = years
			this.months = months
			this.days = days
			this.year = year
			
			this.day = day
			if (month<10) {
				this.month = '0'+month
			} else {
				this.month = month
			}
		},
		methods: {
			bindChange: function (e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				let month = this.months[val[1]]
				if (month<10) {
					this.month = '0'+month
				} else {
					this.month = month
				}
				this.day = this.days[val[2]]
			},
			onClose() {
				this.$emit('onClose',1)
			},
			onSubmit() {
				let data = ''
				if (this.modelValue=='yyyy-MM') {
					data = this.year+'.'+this.month
				} else {
					data = this.year+'.'+this.month+'.'+this.day
				}
				this.$emit('bindChage',data,{year:this.year,month:this.month,day:this.day})
			},
		}
	}
</script>

<style lang="less" scoped>
.pay_popup {
	.body-title {
		font-size: 36rpx;
		color: #666;
		text-align: center;
		padding-bottom: 12rpx;
		
	}
	.pay-title {
		border-bottom: none;
		padding: 0 32rpx;
		.btn {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #C90F07;
			line-height: 32rpx;
		}
	}
}
.picker-view {
	width: 100%;
	height: 432rpx;
	padding: 0 32rpx;
	.picker-box {
		// width: 686px;
		height: 80rpx;
		background: #C90F07;
		font-weight: 500;
		color: #45454C;
		line-height: 80rpx;
		opacity: 0.12;
	}
	uni-picker-view-column {
		&:first-child {
			.picker-box {
				border-top-left-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
			}
		}
		&:last-child {
			.picker-box {
				border-top-right-radius: 16rpx;
				border-bottom-right-radius: 16rpx;
			}
		}
	}
}
.item {
	height: 80rpx;
	line-height: 80rpx;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #45454C !important;
	font-size: 36rpx;
	font-family: PingFang SC;
}

/* 弹出样式 */

.pay_popup {
	width: 100%;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 997;
	transform: translate3d(0, 100%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	border-top-left-radius: 32rpx;
	border-top-right-radius: 32rpx;
	overflow: hidden;
}
.pay_popup.on {
	transform: translate3d(0, 0, 0);
}
.pay_popup .pay-title {
	width: 100%;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #1C1C1F;
	text-align: center;
	position: relative;
	height: 112rpx;
	line-height: 112rpx;
	background: #FFFFFF;
	border-bottom: 1rpx solid #E5E5E5;
	
}
.pay_popup .right-close {
	position: absolute;
	left: 24rpx;
	font-size: 36rpx;
	color: #1C1C1F;
}

</style>

在项目中新建config文件夹 创建address.js文件

将省市区编码放到address.js中，讲address.js引入到组件中，数据太多放不下，如果找不到省市区地址数据，可以用element-ui中的三级联动地址数据打印出来使用
address.js文件在这个地方下载

在父组件中使用

引入父组件中

<template>
	<view>
		<view class="xss-info-item flex-fs-left">
			<view class="xss-left-name">用户地址</view>
				<view class="xss-input line1" @click="onPickAddress">
					<view class="xss-input-bar " v-if="address">{{address}}</view>
					<view class="xss-input-bar" style="color:#999;font-size:32rpx" v-else>省、市、区</view>
				</view>
				<text class="iconfont icon-xiangyou"></text>
			</view>
		
		<pickAdress :isOpen="isPickAddressShow" @close="onCloseAddress" @bindChage="onBindChageAddress"></pickAdress>
	</view>
</template>
<script>
	import pickAdress from '@/components/pick-adress.vue'
	export default {
		components: {
			pickAdress,
		},
		data() {
			return: {
				isPickAddressShow: false,
				selectAddress: {},
				address: '',
			}
		},
		methods: {
			onPickAddress() {
				if (this.authState) return
				this.isPickAddressShow = true
			},
			onCloseAddress(type,data) {
				this.isPickAddressShow = false
			},
			onBindChageAddress(data) {
				this.selectAddress = data
				this.address = data.area1_name+data.area2_name+data.area3_name
				this.isPickAddressShow = false
			},
		}
	}
</script>
波塞西呀
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
uniapp、小程序 省市区选择,拉起弹窗选择
07-29
uniapp省市区选择,拉起弹窗选择，存在拉起动画，默认填值，监听改变。
uniapp小程序使用省市县区选择器picker
weixin_46607967的博客
02-22 8000
uniapp小程序使用省市县区选择器picker
uni-app picker多列选项
最新发布
Queen-Shir的博客
06-24 370
【代码】uni-app picker多列选项。
uni-app 省市区选择器
热门推荐
dearyang
06-16 1万+
一、导入uni-data-picker插件uni-data-picker 数据驱动的picker选择器单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景 二、省市县数据导入项目附：省市区三级联动数据uni-appuni-data-picker省市区数据表-Javascript文档类资源-CSDN下载是一个选择类datacom组件。支持多列级联选择。...
uniapp 省市区三级联动选择器
carbonzhao的专栏
11-02 3039
还有半个小时下班，总想着发点光亮照耀他人。IT技术这东西，尤其是UI方面的东西，于用户体验至关重要，想想最近使用uni-data-picker的丑陋页面，自己重构了这个功能，新加实现，效果图如下，与官方的UI漂亮了特别多！组件实现代码：在你项目合适的目录中创建一个名为zxp-uniRegionSheet.vue的组件文件，一般位于项目的components目录中，注意目录及页面中的引用位置！注意代码中内置了省市区数据，你可以自己补充修改，如果有缺少！
JS案例：简单的多级菜单实现
02-28 1925
代码附上： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
常用的表格正则验证 + 省份选择 JS JQ
weixin_42555713的博客
08-07 1198
常用的表格正则验证 ----轮子 let receiverNameReg = /^[\u4e00-\u9fa5]{2,6}$/; //reg 收货人姓名 let receiverName = $("#receiverName").val(); //收货人姓名 let phoneNumberReg = /^\d{11}$/; //reg电话号 let phoneNumber = $('#phoneNumber').val(); //电话号码va
uniapp---省市区三级联动选择器（需要省市区json数据）
heavenz19的博客
07-19 1335
代码】uniapp---省市区三级联动选择器（需要省市区json数据）
uniapp内置组件pick完成省市区三级联动
work_fei的专栏
11-27 2701
uniapp使用内置picker实现三级联动效果
picker-view自定义日期、日期选择.zip
06-07
综上所述，构建一个自定义的`picker-view`日期选择器涉及到了对`picker-view`组件的使用、年月日的逻辑处理、闰年和大小月的判断，以及动态更新选项数组等多个方面。在实际开发中，根据具体需求，还可以添加更多功能...
使用uniapp中picker-view封装底部选择弹框选择器，解决微信小程序中不可自定义样式问题
05-19
使用uniapp制作微信小程序时候，需要一个城市选择框，但是微信中的弹框样式不可自定义，出现了与项目主题样式不一致问题，于是使用uniapp中picker-view封装底部选择弹框选择器，实现支持自定义确定和取消按钮颜色...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
基于picker-view的日期选择器
03-22
基于picker-view的日期选择器，只有年月日选择，uni-app自带的组件不适合利用按钮触发调用，该组件可用在uni-popup里，点击按钮获取
uniapp省市区三级联动选择 - 纯本地json文件数据驱动 - openDB省市区opendb-city-china - 无需云端服务空间支持
Rudon滨海渔村的博客
09-23 5976
​简要步骤 1.下载uniapp提供的省市区数据 json文件，到项目中 2.app的页面中引入json文件 3.一维数组转多维数组，树形结构，传给组件“uni-data-picker” 4.点击、获取省市区
uniapp实现省市区选择的功能
m0_71939262的博客
05-21 2174
【代码】uniapp实现省市区选择的功能。
uniapp实现省市区选择联动、vue-elementUI实现省市区选择联动
qq_38541936的博客
07-08 5923
这篇文章主要是两个部分，一个是uniapp实现的省市区联动，一个是elementUI里面的Cascader 级联选择器实现的 文章目录数据格式一、uniapp实现省市区选择联动1.导入插件2.页面里面使用3.修改插件里面的代码，用于我们需要的数据4.完整的插件代码二、vue-elementUI实现省市区选择联动1.使用讲解总结 数据格式 下面是后台接口地址列表返回的数据格式 这是省的数据格式 这是市的数据格式 这是区、镇的数据格式 简单来说就是这样，需要嵌套结构，这样才能用到本篇文字的选择 pro
【uniapp+vue3+u-picker】获取中国省市区数据结构，省市区数据三级联动json文件完整版，已实现三级联动效果+省市区街道数据四级联动json文件完整版，已实现四级联动效果
花椒和蕊的博客
09-19 3103
【uniapp+vue3+u-picker】获取中国省市区数据结构，省市区数据三级联动json文件完整版，已实现三级联动效果
uniapp 省市区地区选择
hbws37的博客
06-24 1786
抄别人的，具体什么时候抄的不记得了
uni小程序中 picker选择器的使用，如省市区样式的多列选择实现
m0_57611486的博客
11-09 2241
uni小程序中 picker选择器的使用，如省市区样式的多列选择实现
uni-app picker 两列选择器
08-03
在uni-app中使用picker组件实现两列选择器的方法如下： 首先，在模板中引入picker组件，并设置相应的属性和事件监听```html <picker class="width-" @columnchange="monitor" :range="timeList" :value="value" @change="bindTimeChange"> <view class="domestic" style="color: #a3a3a3;" placeholder="请选择" v-if="receiveAddress===''" > 请选择地区 </view> <view class="domestic" v-else> {{receiveAddress===''?'请选择地区':receiveAddress}} </view> <image src="../../static/icon/right1.png" class="right right-input"/> </picker> ``` 其中，`:range`属性用于设置picker的选项列表，`:value`属性用于设置picker的默认值，`@change`事件用于监听picker的值改变。 然后，在对应的方法中处理picker的值改变事件： ```javascript bindTimeChange(e) { // 省市县的下标 console.log('picker发送选择改变，携带值为', e.detail.value[2]) // 拿到县的下标 const id = e.detail.value[2] - 1 // 拿到选择的县名字 this.provixian = this.userTuxian[id].name // 省市县相加进行展示 this.receiveAddress = this.provinceShen + this.proviShi + this.provixian } ``` 在该方法中，可以通过`e.detail.value`获取到picker选择的值，根据需要进行相应的处理，比如获取县的下标、获取选择的县名字等。 这样就可以实现在uni-app中使用picker组件实现两列选择器的功能了。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值