效果图:
描述:小程序中选择省市区的三级联动功能
picker, 在微信开放文档中小程序的组件-表单组件中就可以看到:
picker主要就是利用其中的mode属性 ,mode属性包含:
<template> <view class="Box"> <picker mode="region" v-model="myregion1" @change="change"> <view> 我的地址:{{myregion}} </view> </picker> </view> </template> <script> export default { components: {}, data() { return { myregion: '请选择', myregion1:['山东省','菏泽市','牡丹区'] } }, // 页面加载 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>