个人项目地址: SubTopH前端开发个人站
(自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面)
SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home
以上 👆 是个人前端项目,欢迎提出您的建议😊
实现效果
功能介绍:
- 支持默认值直接显示滚动定位
- 选择上一次后,下一级重置请选择
- 选中样式可自定义
- 点击确认可校验省市县时候全部选择
直接上代码模板部分(利用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