台州椒江区建设局网站,网站技术建设方案,住房公积金服务,商洛免费做网站需求
最近在做小程序#xff0c;有一个类似折叠面板的ui控件#xff0c;效果大概是这样
代码
因为项目使用的是uniapp#xff0c;所以打算去找uniapp的扩展组件#xff0c;果然给我找到了这个叫uni-collapse的组件#xff08;链接#xff1a;uni-collapse#xff09…需求
最近在做小程序有一个类似折叠面板的ui控件效果大概是这样
代码
因为项目使用的是uniapp所以打算去找uniapp的扩展组件果然给我找到了这个叫uni-collapse的组件链接uni-collapse
但是因为跟我们预期效果差别还是挺大的所以就开始了我们的定制 在这个定制过程中去掉了uni-collapse自带的伪类所带来的两条分割线和背景色给uni-collapse-item外部套上圆弧边框去掉了uni-collapse-item自带的分割线定制了标题文字样式代码如下
view classrules-boxuni-collapse classrulesview classrules-itemuni-collapse-item :show-animationtrue :title-bordernone :bordernone title优惠券详情view classrules-contentview classsub-title有效日期/viewview classsub-text默认开启组件动画使用动画效果折叠内容会有一个从上到下的动画。/viewview classsub-title使用须知/viewview classsub-text默认开启组件动画使用动画效果折叠内容会有一个从上到下的动画。/view/view/uni-collapse-item/view/uni-collapse
/view.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;}}}}
}最后效果
大功告成效果如下
