uniapp 内容展开组件

uni-collapse折叠面板并不符合需求,需要自己写一个。

效果展示:

代码: (vue3版本)

<template><view class="collapse-view"><view class="collapse-content"><swiper:autoplay="false":circular="true":indicator-dots="false":style="{width: '100%',height: calcHeight(),}"class="collapse-swiper"@change="changeSwp">内容区域</swiper><view class="mode-change" @click="changeMode"><!-- 上下展开的小图标--><uni-iconsv-if="isCollapse"type="bottom"size="18"color="#165dff"></uni-icons><uni-icons v-else type="top" size="18" color="#165dff"></uni-icons></view></view></view>
</template><script setup>
import {ref,reactive} from 'vue'
let isCollapse =ref(true) //是否展开控件
// 计算组件内容区域的高度
const calcHeight = () =>{//默认高度let h = "70rpx";if (!isCollapse.value) {//展开后高度h = 190 + "rpx";}return h;
}
//切换展开与否
const changeMode =()=>{isCollapse.value =!isCollapse.value
}
</script>
<style lang="scss" scoped>
.collapse-view {width: 100%;height: auto;background-color: #fff;margin-top: 20rpx;swiper {width: 100%;height: 60upx;}.collapse-content {padding-bottom: 26rpx;border-bottom: 1upx solid #f7f7f7;border-bottom-left-radius: 37upx;border-bottom-right-radius: 37upx;}.collapse-swiper {min-height: 70upx;transition: height ease-out 0.3s;}.mode-change {display: flex;justify-content: center;margin-top: 10upx;margin-bottom: 22upx;:deep(.uni-icons) {position: absolute;}}
}
</style>

vue2版本的 逻辑片段


<script>
export default {props: {},computed: {
//结构部分直接写 calcHeight来调用。不要()calcHeight() {//默认高度let h = "70rpx";if (!this.isCollapse) {//展开后高度h = 190 + "rpx";}return h;},},data() {return {isCollapse: true, //展开与折叠控件};},methods: {changeMode() {this.isCollapse = !this.isCollapse;},},
};</script>

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

AIMS医院手术麻醉信息系统全套源码,自主版权,开箱即用

手术麻醉临床信息系统有着完善的临床业务功能&#xff0c;能够涵盖整个围术期的工作&#xff0c;能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施&#xff0c;能够规范麻醉科的工作流程&#xff0c;实现麻醉手术过程的信息数字化&#xff0c;自动生成麻…

Dubbo3应用开发—Dubbo序列化方案(Kryo、FST、FASTJSON2、ProtoBuf序列化方案的介绍和使用)

Dubbo序列化方案&#xff08;Kryo、FST、FASTJSON2、ProtoBuf序列化方案的介绍和使用&#xff09; 序列化简介 序列化是Dubbo在RPC中非常重要的一个组成部分&#xff0c;其核心作用就是把网络传输中的数据&#xff0c;按照特定的格式进行传输。减小数据的体积&#xff0c;从而…

数据中心液冷服务器详情说明

目录 前言 何为液冷服务器&#xff1f; 为什么需要液冷&#xff1f; 1.数据中心降低PUE的需求 2.政策导向 3.芯片热功率已经达到风冷散热极限 4.液冷比热远大于空气 液冷VS风冷&#xff0c;区别在哪&#xff1f; 1.液冷服务器跟风冷服务器的区别 2.液冷数据中心跟风冷…

前端技术社区总目录

前端技术社区欢迎您的订阅。订阅后&#xff0c;您将可以查看以下所有博客内容。 注&#xff1a;专栏内容主要面向新手 注&#xff1a;每个示例都有相对应的完整代码 注&#xff1a;该专栏博客内容将会逐步迁移至https://blog.csdn.net/m0_60387551/article/details/128017725 …

Ubuntu修改静态IP、网关和DNS的方法总结

Ubuntu修改静态IP、网关和DNS的方法总结 ubuntu系统&#xff08;其他debian的衍生版本好像也可以&#xff09;修改静态IP有以下几种方法。&#xff08;搜索总结&#xff0c;可能也不太对&#xff09; /etc/netplan (use) Ubuntu 18.04开始可以使用netplan配置网络&#xff0…

数学建模——统计回归模型

一、基本知识 1、基本统计量 总体&#xff1a;研究对象的某个感兴趣的指标。样本&#xff1a;从总体中随机抽取的独立个体X1,X2,…,Xn&#xff0c;一般称(X1,…,Xn)为一个样本&#xff0c;可以看成一个n维随机向量&#xff0c;它的每一取组值(x1,…,xn)称为样本的观测值。统计…

哈希 -- 开散列

unordered_map和unordered_set 哈希/散列 -- 值跟存储位置建立映射关系 当不同的值映射到了相同的位置 -- 哈希冲突 / 哈希碰撞 开放定址法&#xff1a; a.线性探测 b.二次探测 负载因子&#xff1a; 越大冲突概率越大 越小冲突的概率越小 但是当负载因子到一个基准值…

yolov5的改进思想

Yolo v5一共有四个模型,分别为Yolov5s、Yolov5m、Yolov5l、Yolov5x。 Yolov5s网络最小,速度最少,AP精度也最低,如果检测的以大目标为主,追求速度,倒也是个不错的选择。 其他的三种网络,在此基础上,不断加深加宽网络,AP精度也不断提升,但速度的消耗也在不断增加。 …

黄金代理如何选择平台?窍门在这儿

作为一个黄金代理平台&#xff0c;什么才是最重要的呢&#xff1f;笔者认为以下三个方面是最重要的&#xff0c;一个是资质&#xff0c;第二个是口碑&#xff0c;第三个是平台的软件。这三者是成为黄金代理要考虑的最重要的三个因素&#xff0c;也直接关系大黄金代理的职业生涯…

ESP32低功耗蓝牙BLE通信

ESP32低功耗蓝牙BLE通信 蓝牙分类GATT协议GATT角色ESP32蓝牙简介ESP32开发板作为BLE服务设备或扫描设备手机APP连接作为BLE Server的ESP32总结 蓝牙分类 经典蓝牙Classic Bluetooth&#xff09;&#xff1a;用于数据量比较大的传输&#xff0c;如&#xff1a;图像、视频、音乐…

GaussDB技术解读系列:性能调优

近日&#xff0c;在第14届中国数据库技术大会&#xff08;DTCC2023&#xff09;的GaussDB“五高两易”核心技术&#xff0c;给世界一个更优选择专场&#xff0c;华为数据库技术专家李士福详细解读了GaussDB性能调优的相关技术和应用实践。 本篇为大家分享GaussDB性能调优的实践…

网络爬虫——HTTP和HTTPS的请求与响应原理

目录 一、HTTP的请求与响应 二、浏览器发送HTTP请求的过程 三、HTTP请求方法 四、查看网页请求 五、常用的请求报头 六、服务端HTTP响应 七、常用的响应报头 八、Cookie 和 Session 九、响应状态码 十、网页的两种加载方法 十一、认识网页源码的构成 十二、爬虫协议…

【大数据开发技术】实验04-HDFS文件创建与写入

文章目录 一、实验目标二、实验要求三、实验内容四、实验步骤 一、实验目标 熟练掌握hadoop操作指令及HDFS命令行接口掌握HDFS原理熟练掌握HDFS的API使用方法掌握单个本地文件写入到HDFS文件的方法掌握多个本地文件批量写入到HDFS文件的方法 二、实验要求 给出主要实验步骤成…

uniapp——ios证书申请——详细步骤+遇到的坑——技能提升

三年前&#xff0c;我曾经写过uniapp的程序&#xff0c;时隔三年&#xff0c;又遇到了uniapp的需求&#xff0c;之前没有自行申请ios证书&#xff0c;现在终于要自己生成证书了。。。 是福不是祸&#xff0c;是祸躲不过。 uniapp生成ios证书的详细步骤 uniapp对接unipush的操作…

buuctf web [ACTF2020 新生赛]Upload

明了但不明显的文件上传 传个试试 行&#xff0c;抓包吧&#xff0c;php格式不行&#xff0c;就先上传要求的格式&#xff1a;jpg、png、gif 抓到上传的包之后&#xff0c;再修改成我们想要的 常见的php格式绕过有&#xff1a;php,php3,php4,php5,phtml,pht 挨个试试 这是上个…

第九章 常用服务器的搭建

第九章 常用服务器的搭建 1.配置FTP服务器 1.1.FTP简介 ​ FTP&#xff08;File Transfer Protocol&#xff0c;文件传送协议&#xff09;是TCP/IP网络上两台计算机间传送文件的协议&#xff0c;FTP是在TCP/IP网络和Internet上最早使用的协议之一&#xff0c;它属于网络协议…

【pytest】conftest.py使用

1. 创建test_project 目录 test_project/sub/test_sub.py def test_baidu(test_url):print(fsub {test_url}) test_project/conftest.py 设置钩子函数 只对当前目录 和子目录起作用 import pytest #设置测试钩子函数 pytest.fixture() def test_url():return "http…

可以创业,也可以副业的网上长期挣钱的项目

在这个飞速发展的互联网时代&#xff0c;越来越多的人开始尝试在网上创业或者寻找一份可持续的副业来增加收入。不过在网上赚钱的难度是比较大的&#xff0c;不是轻易就能做到的&#xff0c;所以不付出一番努力&#xff0c;没有悟性和执行力&#xff0c;那么是很难做好的&#…

淘天集团联合爱橙科技开源大模型训练框架Megatron-LLaMA

9月12日&#xff0c;淘天集团联合爱橙科技正式对外开源大模型训练框架——Megatron-LLaMA&#xff0c;旨在让技术开发者们能够更方便地提升大语言模型训练性能&#xff0c;降低训练成本&#xff0c;并保持和LLaMA社区的兼容性。测试显示&#xff0c;在32卡训练上&#xff0c;相…

pytorch环境搭建到pycharm项目映射配置(成功后回顾性记录/自用)

利用Anaconda创建pytorch虚拟环境 前提&#xff1a;成功安装Anaconda&#xff0c;确保可以打开NVIDIA控制面板 开始-》搜索“Anaconda Prompt” 打开后输入&#xff1a;conda create -n 你的虚拟环境名 python3.9。输入y&#xff0c;继续安装&#xff0c;完成。 输入&#…