uni-app 折叠自定义

uni-app的uni-collapse折叠组件样式修改
下面是修改后的样式

<uni-collapse accordion class="ze"  v-model="isCollapse" @click="toggleCollapse"><!-- 因为list默认带一条分隔线,所以使用 titleBorder="none" 取消面板的分隔线 --><uni-collapse-item title-border="none" :border="false"class="ze_item"><template v-slot:title><uni-list><uni-list-item title="阅读理解-作者思维知识点":show-extra-icon="true" :extra-icon="isCollapse ? extraIcon : CloseFold":show-badge="false"></uni-list-item></uni-list></template><view class="content"><uni-list><uni-list-item title="阅读理解-作者思维知识点":show-extra-icon="true" :extra-icon="{type:'smallcircle-filled',color: '#FF6A28',size: '14'}":show-badge="false"><template v-slot:footer><image class="slot-image" src="/static/img/Answerbutton.png" mode="widthFix"></image></template></uni-list-item><uni-list-item title="阅读理解-作者思维知识点":show-extra-icon="true" :extra-icon="{type:'smallcircle-filled',color: '#FF6A28',size: '14'}":show-badge="false"></uni-list-item><uni-list-item title="阅读理解-作者思维知识点":show-extra-icon="true" :extra-icon="{type:'smallcircle-filled',color: '#FF6A28',size: '14'}":show-badge="false"></uni-list-item></uni-list></view></uni-collapse-item><uni-collapse-item title-border="none" title="手风琴效果" class="ze_item"thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"><text>折叠内容</text></uni-collapse-item><uni-collapse-item title-border="none" title="禁用状态" class="ze_item"thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"><text>折叠内容</text></uni-collapse-item></uni-collapse>
// js
return {isCollapse: false, // 展开。后续会在循环的时候加入open字段表示当前参数已经展开,这里只							做展示extraIcon: {color: '#FF6A28',size: '26',type: 'minus-filled'}, // 展开的iconCloseFold:{color: '#FF6A28',size: '26',type: 'plus-filled'} // 关闭的icon
}
methods: {toggleCollapse() {this.isCollapse = !this.isCollapse;},
}修改的css// 修改折叠的默认样式 list列表的上下border/deep/.uni-collapse,/deep/.uni-list--border:after,/deep/.uni-list--border-top,/deep/.uni-list--border-bottom{background-color: transparent;}// 左侧图标往右便宜/deep/.uni-list-item__icon {margin-right: 30rpx;}// 去掉父元素往左偏移/deep/.uni-list-item__container {padding-left: 0px;}.content{// 展开子元素往左偏移/deep/.uni-list-item__container {padding-left: 7.5px;}}// 手动添加的图标.slot-image,/deep/.slot-image{/* #ifndef APP-NVUE */display: block;/* #endif */// margin-right: 10px;width: 28rpx;height: 28rpx;}// 去掉原生的折叠的图标/deep/.custom_none{display: none;}// 去掉原生的图标旋转/deep/.custom_uni-collapse-item__title-arrow-active{transform: rotate(0deg);}

修改一下uni-collapse的uni-collapse-item

<view v-if="showArrow":class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"class="uni-collapse-item__title-arrow custom_uni-collapse-item__title-arrow-active"><uni-icons class="custom_none" :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" /><image class="slot-image" src="/static/img/Answerbutton.png" mode="widthFix"></image></view>

在这里插入图片描述
设计图样式
在这里插入图片描述
修改后的样式
在这里插入图片描述
就这样吧…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/71042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

反序列化漏洞复现(typecho)

文章目录 执行phpinfogetshell 执行phpinfo 将下面这段代码复制到一个php文件&#xff0c;命名为typecho_1.0-14.10.10_unserialize_phpinfo.php&#xff0c;代码中定义的类名与typecho中的类相同&#xff0c;是它能识别的类&#xff1a; <?php class Typecho_Feed{const…

2023国赛数学建模C题思路分析 - 蔬菜类商品的自动定价与补货决策

# 1 赛题 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差&#xff0c; 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&#xff0c; 商超通常会根据各商品的历史销售和需 求情况每天进行补货。 由于商超销售的蔬菜…

day5 qt

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);timer_idthis->startTimer(100);//啓動一個定時器 每100ms發送一次信號ui->Edit1->setPlaceholderTex…

java 面试题汇总整理

java有哪四种引用类型 在Java中&#xff0c;有四种引用类型&#xff0c;用于控制对象的生命周期和垃圾回收行为。这些引用类型包括&#xff1a; 强引用&#xff08;Strong Reference&#xff09;&#xff1a; 强引用是最常见的引用类型&#xff0c;它们是默认的引用类型。当一…

ChatGPT:革命性的自然语言处理技术

自然语言处理&#xff08;NLP&#xff09;技术的快速发展已经为我们的日常生活带来了巨大的变革。在这个领域&#xff0c;ChatGPT作为一个突出的代表&#xff0c;正在为我们带来更多的便利和机会。本文将介绍ChatGPT的基本概念、应用领域以及它在未来可能带来的影响。 ChatGPT…

Python UI自动化 —— 关键字+excel表格数据驱动

步骤&#xff1a; 1. 对selenium进行二次封装&#xff0c;创建关键字的库 2. 准备一个表格文件来写入所有测试用例步骤 3. 对表格内容进行读取&#xff0c;使用映射关系来对用例进行调用执行 4. 执行用例 1. 对selenium进行二次封装&#xff0c;创建关键字的库 from time imp…

【SpingBoot】详细介绍SpringBoot项目中前端请求到数据库再返回前端的完整数据流转,并用代码实现

在SpringBoot项目中&#xff0c;前端请求到最终返回的完整数据流转一般包括以下几个步骤&#xff1a; 前端发送HTTP请求到后端Controller。 Controller接收到请求后&#xff0c;调用相关Service处理业务逻辑。 Service调用DAO层获取数据。 DAO层访问数据库获取数据。 数据库…

【51单片机实验笔记】中断篇(一) 外部中断

目录 前言中断系统概述寄存器说明中断优先级寄存器&#xff08;IP&#xff09;中断允许控制寄存器&#xff08;IE&#xff09;中断请求标志寄存器&#xff08;TCON&#xff09; 外部中断配置软件实现按键事件的外部中断实现 遇到的问题总结 前言 中断是单片机非常重要的概念&a…

2021江苏省赛热身赛 C Magic Rabbit(数形结合)

2021江苏省赛热身赛 C Magic Rabbit(数形结合) Magic Rabbit 非常好且巧妙地一道题。 大意&#xff1a;给出三种溶液 &#xff0c; 三种溶液分别含有不同浓度的 x &#xff0c;y 两种物质。 溶液x (mg/ml)y (mg/ml)溶液1x1y1溶液2x2y2溶液3x3y3 给出 Q 组询问 &#xff0c…

MySQL 8.0.34安装教程

一、下载MySQL 1.官网下载 MySQL官网下载地址&#xff1a; MySQL :: MySQL Downloads &#xff0c;选择下载社区版&#xff08;平时项目开发足够了&#xff09; 2.点击下载MySQL Installer for Windows 3.选择版本8.0.34&#xff0c;并根据自己需求&#xff0c;选择下载全社区安…

flutter报错-cmdline-tools component is missing

安装完androidsdk和android studio后&#xff0c;打开控制台&#xff0c;出现错误 解决办法 找到自己安装android sdk的位置&#xff0c;然后安装上&#xff0c;并将下面的勾选上 再次运行 flutter doctor 不报错&#xff0c;出现以下画面 Doctor summary (to see all det…

WebSocket的那些事(5-Spring中STOMP连接外部消息代理)

目录 一、序言二、开启RabbitMQ外部消息代理三、代码示例1、Maven依赖项2、相关实体3、自定义用户认证拦截器4、Websocket外部消息代理配置5、ChatController6、前端页面chat.html 四、测试示例1、群聊、私聊、后台定时推送测试2、登录RabbitMQ控制台查看队列信息 五、结语 一、…

超图嵌入论文阅读2:超图神经网络

超图嵌入论文阅读2&#xff1a;超图神经网络 原文&#xff1a;Hypergraph Neural Networks ——AAAI2019&#xff08;CCF-A&#xff09; 源码&#xff1a;https://github.com/iMoonLab/HGNN 500star 概述 贡献&#xff1a;用于数据表示学习的超图神经网络 (HGNN) 框架&#xf…

【高阶数据结构】红黑树 {概念及性质;红黑树的结构;红黑树的实现;红黑树插入操作详细解释;红黑树的验证}

红黑树 一、红黑树的概念 红黑树&#xff08;Red Black Tree&#xff09; 是一种自平衡二叉查找树&#xff0c;在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有…

旅游APP外包开发注意事项

旅游类APP通常具有多种功能&#xff0c;以提供给用户更好的旅行体验。以下分享常见的旅游类APP功能以及在开发和使用这些APP时需要注意的问题&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 常见功能…

八大排序算法----堆排序

堆排序的基本步骤&#xff1a;&#xff08;以从大到小的顺序排序为例&#xff09; 1.构建大顶堆&#xff08;每个结点的值都大于或等于其左右孩子结点的值&#xff09; 2.排序&#xff1a;每次堆顶的元素取出来&#xff08;整个堆中值最大&#xff09;&#xff0c;与最后一个…

drf之--认证组件、权限组件(django项目国际化)、频率组件、排序

视图集回顾 # 1 9 个视图子类-GenericAPIView5个视图扩展类的组合-ListAPIView,CreateAPIView,DestroyAPIView,RetrieveAPIView,UpdateAPIView-ListCreateAPIView-RetrieveDestroyAPIView,RetrieveUpdateAPIView,RetrieveUpdateDestroyAPIView-class TestView(ListAPIView):qu…

数学建模圈养湖羊的空间利用率

数学建模圈养湖羊的空间利用率 问题&#xff1a;规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养&#xff0c;适应不同种类、不同阶段的牲畜对空间的不同要求&#xff0c;以保障牲畜安全和健康&#xff1b;与此同时&#xff0c;也要尽量减少空间闲置所造成的资源浪费…

Code Inspector:点击页面元素自动定位到代码

Code Inspector是一个开发提效的神器 点击页面上的 DOM 元素&#xff0c;它能自动打开 IDE 并定位到 DOM 对应源代码位置 文档 https://inspector.fe-dev.cn/https://github.com/zh-lx/code-inspector 目录 1、安装2、配置2.1、webpack2.2、vue2.3、vite 3、使用 1、安装 n…

入栏需看——学习记忆

记忆方法千千种&#xff0c;本栏意在梳理其中道道来&#xff0c;旦有小得&#xff0c;肥肠幸耶。从不同角度分析学习记忆。 逻辑篇 有逻辑 用思维导图 思维导图记忆有逻辑的文本/内容 理论 巧记书本结构–思维导图 模仿 HCIE-Cloud Computing LAB备考第一步&#xff1a…