【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;
                }
            }

        }
    }
}

最后效果

大功告成,效果如下

相关推荐
说私域15 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序的参与感构建研究
人工智能·小程序·开源
清风细雨_林木木18 小时前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮18 小时前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友18 小时前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟18 小时前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue1 天前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
從南走到北2 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
canglingyue2 天前
微信小程序截屏与录屏功能详解
微信小程序·小程序