uniapp开发微信小程序底部地区选择弹框

个人项目地址: SubTopH前端开发个人站

(自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面)

SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home

以上 👆 是个人前端项目,欢迎提出您的建议😊

实现效果

功能介绍:

  1. 支持默认值直接显示滚动定位
  2. 选择上一次后,下一级重置请选择
  3. 选中样式可自定义
  4. 点击确认可校验省市县时候全部选择

 直接上代码模板部分(利用uniapp中的picker-view进一步封装)

<template>
  <view>
    <view
      class="tui-actionsheet-class tui-actionsheet"
      :class="[show ? 'tui-actionsheet-show' : '']"
    >
      <view class="regional-selection">
        <view class="selection-top">
          <text class="top-title">请选择地址区域</text>
          <image
            src="/static/image/bar-close.png"
            class="close-img"
            @tap="handleClickMask"
          />
        </view>
        <view class="selection-title">
          <text>省份</text>
          <text>城市</text>
          <text>区县</text>
        </view>
        <!-- 区域滚动选择 -->
        <picker-view
          class="picker-view"
          indicator-style="height:40px"
          mask-style="background-image: linear-gradient(to top, #ffffffcc,#fff, #fff)"
          @change="b
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值