uniapp 内容展开组件

news2024/11/19 16:42:55

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-icons
          v-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.coloradmin.cn/o/1032086.html

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

相关文章

海外代理IP是什么?如何使用?

一、海外代理IP是什么&#xff1f; 首先&#xff0c;代理服务器是在用户和互联网之间提供网关的系统或路由器。它是一个服务器&#xff0c;被称为“中介”&#xff0c;因为它位于最终用户和他们在线访问的网页之间。 海外IP代理是就是指从海外地区获取的IP地址&#xff0c;用…

YashanDB荣获“鼎新杯”数字化转型应用奖项

近日&#xff0c;深算院YashanDB 团队与深燃集团联合共建的深圳燃气集团数据库国产化建设项目&#xff0c;荣获第二届“鼎新杯”数字化转型应用大赛信息技术应用创新赛道二等奖&#xff01;此次获奖&#xff0c;彰显了崖山数据库系统YashanDB自主领先的国产数据库技术优势和优秀…

ZABBIX 6.4安装部署

ZABBIX 6.4安装部署 zabbix的主要组成&#xff1a; 1、Zabbix Server6.4&#xff1a;Zabbix 服务端&#xff0c;是 Zabbix 的核心组件。它负责接收监控数据并触发告警&#xff0c;还负责将监控数据持久化到数据库中。 2、Zabbix Agent&#xff1a;Zabbix 客户端&#xff0c;部…

好用的一站式MES系统有哪些?全面管理生产流程,实现工厂数字化转型

在现代制造业中&#xff0c;MES制造执行系统已经成为了不可或缺的信息化工具。它为企业建立了规范化、集成化的生产信息管理平台&#xff0c;通过集成管理思想&#xff0c;帮助企业优化流程管控、数字化生产车间&#xff0c;从而显著提升了生产效率。那么&#xff0c;MES系统到…

SpringBoot+Vue项目中session改变的问题解决

一&#xff0c;发现问题 项目是SpringbootVue的前后端分离项目&#xff0c;没有什么特殊的配置。在登录之后&#xff0c;会以sessionId为key存在httpSession中&#xff0c;然后后续请求就会现在Filter中看是否在HttpSession中查询到数据&#xff0c;如果查到才继续&#xff0c…

目前很火的养猫微信小程序源码带流量主+搭建教程

目前很火的养猫微信小程序源码带流量主搭建教程。 搭建教程 进入小程序我们下载开发者工具 开发者工具安装好了 我们就把前端源码导入进开发者工具中 这里的APPID我们填写自己的小程序APPID 修改siteinfo.js里的uniacid和acid 这两个ID在刚才后端添加的小程序那里看 在把…

【linux】shell脚本调试

前几天的一篇linux定时删除服务器日志 &#xff0c;有人读了&#xff0c;私信问题。说我写了脚本了&#xff0c;怎么去调试一下&#xff0c;类似于代码的debug。 那我们今天来聊聊。 执行脚本命令是&#xff1a; sh 脚本名 sh dele_log2.sh 执行并输出。 Shell 脚本调试选…

7.2、如何理解Flink中的水位线(Watermark)

目录 0、版本说明 1、什么是水位线&#xff1f; 2、水位线使用场景&#xff1f; 3、设计水位线主要为了解决什么问题&#xff1f; 4、怎样在flink中生成水位线&#xff1f; 4.1、自定义标记 Watermark 生成器 4.2、自定义周期性 Watermark 生成器 4.3、内置Watermark生…

【Java 基础篇】Java线程异常处理详解

在多线程编程中&#xff0c;异常处理是一个至关重要的方面&#xff0c;它决定了你的多线程应用程序的稳定性和可靠性。在本篇博客中&#xff0c;我们将深入探讨Java中的线程异常处理&#xff0c;包括线程抛出的异常类型、如何捕获和处理异常以及最佳实践。 异常类型 在多线程…

ps打开找不到MSVCP140.dll重新安装方法,安装ps出现msvcp140.dll缺失解决方法

在计算机中&#xff0c;我们可能会遇到许多问题&#xff0c;其中之一就是找不到msvcp140.dll文件。msvcp140.dll是一个动态链接库文件&#xff0c;它是Microsoft Visual C 2015 Redistributable的一部分。当计算机找不到这个文件时&#xff0c;可能会导致程序无法正常运行。本文…

PostgreSQL如何支持PL/Python过程语言

瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;10.4 文档用途 本文档主要介绍PostgreSQL如何支持PL/Python过程语言&#xff0c;如何创建plpython扩展。 详细信息 一、PostgreSQL支持python语言…

创建双向循环链表(不带头节点+插入删除操作)

#include<iostream> using namespace std; typedef struct list {int data;list* prior;list* next; }list,*linklist; void Createlist(linklist& l,int n)//创建&#xff08;不带头节点&#xff09;双向链表 {l new list;l->prior NULL;l->next NULL;link…

注册苹果开发者账号步骤揭秘,创建证书全攻略

​ 目录 转载&#xff1a;注册苹果开发者账号的方法 转载&#xff1a;注册苹果开发者账号的方法 在2020年以前&#xff0c;注册苹果开发者账号后&#xff0c;就可以生成证书。 但2020年后&#xff0c;因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号&…

Cortex-M4之FPU单元

最近在学习实时操作系统&#xff0c;以下是我对学习实时操作系统过程中做的一些笔记。 一、FPU单元 在 Coretex-M4 处理器中有一个可选的单精度 FPU 单元&#xff0c;一般 STM32F429 就有 FPU 单元&#xff0c; 如果使能了 FPU 单元的话就可以使用它来对单精度浮点数进行计算…

Mac配置iTerm样式终端

一、MacOs系统 MacOs中终端使用iTerm2 1. 配置oh-my-zsh oh my zsh 的地址&#xff1a; https//github.com/ohmyzsh/ohmyzsh 插件存放位置&#xff1a;~/.oh-my-zsh/plugins 下载常用的插件 git clone http://github.com/zsh-users/zsh-syntax-highlighting.git 修改配…

APP广告变现策略:如何实现盈利与用户体验的平衡?

如何把握流量变现和用户体验的平衡呢&#xff1f;这是许多 APP 开发者在商业化进程中都会关心并迫切需要解决的问题。以下是总结的一些方法和策略。 一、深入了解用户需求 在开发产品或进行商业决策时&#xff0c;我们要始终以用户需求为出发点。通过市场调研、用户调研和数据…

iterm2免密码连接远程服务器教程

iterm2免密码连接远程服务器 commandO&#xff1a;打开iterm的Profiles。如下图 打开&#xff1a;Edit Profiles&#xff0c;页面如下图 点击左侧底部➕ Send text at start位置写&#xff1a;/Users/XXX/iterm_login.sh 22 username 服务器ip password demo&#xff1a;/User…

01Redis的安装和开机自启的配置

安装Redis 单机安装Redis 大多数企业都是基于Linux服务器来部署项目&#xff0c;而且Redis官方也没有提供Windows版本的安装包(此处选择的Linux版本的CentOS 7) Windows版直接下载对应版本的.zip压缩包解压即可使用 第一步: Redis是基于C语言编写的&#xff0c;因此首先需要…

9.21数电(加法器状态机独热编码)

加法 半加器 一位&#xff0c;分为两部分&#xff0c;一个是进位&#xff0c;一个是单位上的和 进位采取与门&#xff0c;单位上的和用异或门 全加器 进位数就是三个数进行加和&#xff0c;通过与门&#xff0c;就是两两过与门 描述每位的和项就是&#xff0c;只去描述那个…

【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享:

文章目录 一、效果图:二、实现思路:三、实现代码: 一、效果图: 二、实现思路: 文档&#xff1a; 【MDN】https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/mediaDevices web技术分享| WebRTC 实现屏幕共享 面试官&#xff1a;纯前端如何实现录屏并保存视频到本地&a…