uniapp-picker选择省市区效果demo(整理)

效果图:在这里插入图片描述

描述:小程序中选择省市区的三级联动功能
picker, 在微信开放文档中小程序的组件-表单组件中就可以看到:
在这里插入图片描述
picker主要就是利用其中的mode属性 ,mode属性包含:
在这里插入图片描述

<template>
	<view class="Box">
		<picker mode="region" @change="change">
			<view>
				我的地址:{
    
    {
    
    myregion}}
			</view>
		</picker>
	</view>

</template>

<script>
	export default {
    
    
		components: {
    
    },
		data() {
    
    
			return {
    
    
				myregion: '请选择',
			}
		},
		// 页面加载
		onLoad(e) {
    
    
			//uni.hideTabBar(); //不让底部显示tab选项

		},
		// 页面显示
		onShow() {
    
    

		},
		// 方法
		methods: {
    
    
			// 点击选择省市区
			change(e){
    
    
				console.log(e,'change');
				this.myregion = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2];
			},
		},
		// 计算属性
		computed: {
    
    

		},
		// 侦听器
		watch: {
    
    

		},
		// 页面隐藏
		onHide() {
    
    

		},
		// 页面卸载
		onUnload() {
    
    

		},
		// 触发下拉刷新
		onPullDownRefresh() {
    
    
			this.pageNum = 1
			// this.getListData()
		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {
    
    
			this.pageNum++
			// this.getListData()
		},
	}
</script>

<style lang="scss" scoped>
	
</style>

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/125871258