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

        }
    }
}

最后效果

大功告成,效果如下

相关推荐
iOS阿玮34 分钟前
国庆假期 iOS 开发者守好邮箱 “防线”,严防恶意投诉避免产品下架
uni-app·app·apple
CRMEB定制开发1 小时前
PHP多商户接入阿里云识图找商品
android·阿里云·小程序·php·商城系统·微信商城·crmeb
00后程序员张1 小时前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
isixe3 小时前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
说私域3 小时前
基于开源AI智能名片与链动2+1模式的S2B2C商城小程序研究:构建“信息找人”式精准零售新范式
人工智能·小程序·开源
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
说私域4 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在公益课裂变法中的应用与影响研究
人工智能·小程序
Tartly4 小时前
掌中智汇,运筹帷幄 - 全新ASUS华硕智汇商擎小程序上线
小程序
私人珍藏库4 小时前
[吾爱大神原创] wx小程序自动解包工具界面版1.0.0
小程序
2501_916013745 小时前
iOS 26 设备文件管理实战指南,文件访问、沙盒导出、系统变更与 uni-app 项目适配
android·ios·小程序·uni-app·cocoa·iphone·webview