zl程序教程

您现在的位置是:首页 >  其它

当前栏目

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

选择 效果 整理 Demo uniapp picker 省市区
2023-09-14 09:04:05 时间

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

描述:小程序中选择省市区的三级联动功能
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>