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