Uniapp picker select the effect demo of provinces and cities (finishing)

design sketch ：

describe ： Select the three-level linkage function of provinces and cities in the applet
picker, Open the components of small programs in wechat - You can see in the form component ：

picker It is mainly to use mode attribute ,mode Attribute contains ：

<template>
	<view class="Box">
		<picker mode="region" @change="change">
			<view>
				 My address ：{
    {
    myregion}}
			</view>
		</picker>
	</view>

</template>

<script>
	export default {
    
		components: {
    },
		data() {
    
			return {
    
				myregion: ' Please select ',
			}
		},
		//  Page loading 
		onLoad(e) {
    
			//uni.hideTabBar(); // Don't let the bottom show tab Options 

		},
		//  Page shows 
		onShow() {
    

		},
		//  Method 
		methods: {
    
			//  Click to select a province or city 
			change(e){
    
				console.log(e,'change');
				this.myregion = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2];
			},
		},
		//  Compute properties 
		computed: {
    

		},
		//  The listener 
		watch: {
    

		},
		//  Page hidden 
		onHide() {
    

		},
		//  Page uninstall 
		onUnload() {
    

		},
		//  Trigger pull-down refresh 
		onPullDownRefresh() {
    
			this.pageNum = 1
			// this.getListData()
		},
		//  Handling function of page pull bottom event 
		onReachBottom() {
    
			this.pageNum++
			// this.getListData()
		},
	}
</script>

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