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

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

效果图:

描述:小程序中选择省市区的三级联动功能

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>
相关文章
uniapp input框监听回车搜索事件效果demo(整理)
uniapp input框监听回车搜索事件效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp授权小程序隐私弹窗效果demo(整理)
uniapp授权小程序隐私弹窗效果demo(整理)
uniapp小程序跳转其他小程序uni.navigateToMiniProgram效果demo(整理)
uniapp小程序跳转其他小程序uni.navigateToMiniProgram效果demo(整理)
uniapp手机号授权登录-现在只能通过手机号授权登录,后台来获取用户信息了效果demo(整理)
uniapp手机号授权登录-现在只能通过手机号授权登录,后台来获取用户信息了效果demo(整理)