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…

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…

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

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

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;欢迎交流合作。 常见功能…

入栏需看——学习记忆

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

Python基于Mirai开发的QQ机器人保姆式教程(亲测可用)

在本教程中&#xff0c;我们将使用Python和Mirai来开发一个QQ机器人&#xff0c;本文提供了三个教学视频&#xff0c;包教包会&#xff0c;本文也很贴心贴了代码和相关文件。话不多说&#xff0c;直接开始教学。 目录 一、安装配置MIrai 图片验证码报错&#xff1a; 二、机器…

vue-cli中总提示组件没有正确注册

这里写目录标题 一、报错提示二、修改办法 一、报错提示 二、修改办法 <template><div><aside-component style"width: 15%"></aside-component></div> </template><script> import AsideComponent from /components/Asi…

NATAPP使用详细教程(免费隧道内网映射)

NATAPP - https://natapp.cn/tunnel/lists NATAPP 在开发时可能会有将自己开发的机器上的应用提供到公网上进行访问&#xff0c;但是并不想通过注册域名、搭建服务器&#xff1b;由此可以使用natapp&#xff08;内网穿透&#xff09; 购买免费隧道 修改隧道配置 看自己的web…

JAVA毕业设计096—基于Java+Springboot+Vue的在线教育系统(源码+数据库+18000字论文)

基于JavaSpringbootVue的在线教育系统(源码数据库18000字论文)096 一、系统介绍 本系统前后端分离 本系统分为管理员、用户两种角色(管理员角色权限可自行分配) 用户功能&#xff1a; 注册、登录、课程预告、在线课程观看、学习资料下载、学习文章预览、个人信息管理、消息…

【计算机视觉项目实战】中文场景识别

✨专栏介绍&#xff1a; 经过几个月的精心筹备&#xff0c;本作者推出全新系列《深入浅出OCR》专栏&#xff0c;对标最全OCR教程&#xff0c;具体章节如导图所示&#xff0c;将分别从OCR技术发展、方向、概念、算法、论文、数据集等各种角度展开详细介绍。 &#x1f468;‍&…

【Two Stream network (Tsn)】(二) 阅读笔记

贡献 将深度神经网络应用于视频动作识别的难点&#xff0c;是如何同时利用好静止图像上的 appearance information以及物体之间的运动信息motion information。本文主要有三点贡献&#xff1a; 1.提出了一种融合时间流和空间流的双流网络&#xff1b; 2.证明了直接在光流上训…

【C++精华铺】10.STL string模拟实现

1. 序言 STL&#xff08;标准模板库&#xff09;是一个C标准库&#xff0c;其中包括一些通用的算法、容器和函数对象。STL的容器是C STL库的重要组成部分&#xff0c;它们提供了一种方便的方式来管理同类型的对象。其中&#xff0c;STLstring是一种常用的字符串类型。 STLstrin…

Docker如何安装seafile

SQLite 方式 要在 Docker 中安装 Seafile&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装 Docker&#xff1a;确保您的系统上已经安装了 Docker。您可以根据您的操作系统类型&#xff0c;在官方网站上找到适合您系统的 Docker 版本并进行安装。 下载 Seafile 镜像&…

Unity设置TextMeshPro文本超出范围显示...

TextMtshPro文本超出范围&#xff0c;展示省略。选择Overflow为Ellipsis。