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>