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

        }
    }
}

最后效果

大功告成,效果如下

相关推荐
xiejunna33 分钟前
uniapp内把视频mp4的base64保持到手机文件系统
uni-app·视频base64保存手机
工作姬14 小时前
技术分享!《柬埔寨语翻译通》app:一款全面的柬埔寨语翻译工具,小语种翻译工具实现语音识别翻译的难点在哪里?
人工智能·小程序·语音识别·柬埔寨·柬埔寨语·高棉语·高棉语翻译
qq229511650215 小时前
微信小程序uniapp+vue飞机订票航空售票系统
vue.js·微信小程序·uni-app
Java Fans15 小时前
微信小程序——用户隐私保护指引填写(详细版)
微信小程序·小程序·notepad++
qq229511650216 小时前
微信小程序寓言童话创作APP设计与实现
微信小程序·uni-app
2401_8441379518 小时前
PHP露营地管理平台小程序系统源码
大数据·微信·微信小程序·小程序·微信公众平台·微信开放平台
咸虾米_18 小时前
vite跨越配置设置bypass函数,查看真实的接口地址,适用于uniapp
开发语言·javascript·uni-app·vue
anyup_前端梦工厂18 小时前
uni-app 图标库整合最佳实践:使用 iconfont 构建属于自己的图标库
前端·javascript·uni-app
V+zmm1013419 小时前
停车共享小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·ssm·课程设计·1024程序员节
说私域19 小时前
服装品牌零售业态融合中的创新发展:以开源 AI 智能名片 S2B2C 商城小程序为视角
人工智能·小程序