【uniapp】uniapp开发小程序定制uni-collapse(折叠面板)

需求

最近在做小程序,有一个类似折叠面板的ui控件,效果大概是这样

代码

因为项目使用的是uniapp,所以打算去找uniapp的扩展组件,果然给我找到了这个叫uni-collapse的组件(链接:uni-collapse

但是因为跟我们预期效果差别还是挺大的,所以就开始了我们的定制

在这个定制过程中,去掉了uni-collapse自带的伪类所带来的两条分割线和背景色,给uni-collapse-item外部套上圆弧边框,去掉了uni-collapse-item自带的分割线,定制了标题文字样式,代码如下

html 复制代码
<view class="rules-box">
   <uni-collapse class="rules">
        <view class="rules-item">
            <uni-collapse-item :show-animation="true" :title-border="none" :border="none" title="优惠券详情">
                <view class="rules-content">
                    <view class="sub-title">有效日期:</view>
                    <view class="sub-text">默认开启组件动画,使用动画效果折叠内容会有一个从上到下的动画。</view>
                    <view class="sub-title">使用须知:</view>
                    <view class="sub-text">默认开启组件动画,使用动画效果折叠内容会有一个从上到下的动画。</view>
                </view>
            </uni-collapse-item>
        </view>
    </uni-collapse>
</view>
css 复制代码
.rules-box {
   width: 100%;
    padding: 20rpx 30rpx 230rpx;
    box-sizing: border-box;
    border-bottom: none;
    border-radius: 20rpx;
    .rules{
        /deep/ .uni-collapse {
            background-color: transparent;
            &::after,
            &::before{
                content: '';
                height: 0rpx;
            }
        }

        .rules-item {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            // box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            background: #ffffff;
            overflow: hidden;

            /deep/ .uni-collapse-cell {
                &::after,
                &::before{
                    content: '';
                    height: 0rpx;
                }
            }
            /deep/ .uni-collapse-cell--open {
                background: #ffffff;
            }
            /deep/ .uni-collapse-cell__title {
                padding: 0;
                margin-bottom: 30rpx;
            }
            /deep/ .uni-collapse-cell__title-text {
                color: var(--unnamed, #333);
                font-family: PingFang SC;
                font-size: 28rpx;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                letter-spacing: 0.14px;
                text-transform: uppercase;
            }

            .rules-content {
                border-top: 1px solid #ebeef5;
                .sub-title{
                    color: #333;
                    font-family: PingFang SC;
                    font-size: 28rpx;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    letter-spacing: 0.14px;
                    text-transform: uppercase;
                    padding-top: 24rpx;
                }
                .sub-text {
                    font-weight: 400;
                    font-size: 24rpx;
                    line-height: 24rpx;
                    color: #a8a9ad;
                    padding-top: 12rpx;
                }
            }

        }
    }
}

最后效果

大功告成,效果如下

相关推荐
耶啵奶膘4 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡6 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼10 小时前
微信小程序-prettier 格式化
微信小程序·小程序
我开心就好o11 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index11 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
wqq_99225027712 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
初遇你时动了情19 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
licy__19 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
小小黑00721 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字21 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app