第十节 动态面板实现推动和拉动效果

news2024/10/5 16:22:54

        在原型设计中我们经常会遇到元件使用显示更多或者收起效果,下面以面板元件推动与拉动效果做案件说明。

一、设置原有内容

我这里添加一个表格内容,添加“显示更多”文本超链接

二、设置在更多显示面板内容

添加一个动态面板,设置有内容、无内容两个状态

在有内容面板中添加一个表格,表格跟原来表格数据相接,面板默认设置隐藏。

三、添加交互事情

添加两个情形

1、判断当前元件文字==“显示更多”条件时

设置面板状态为“有内容”,推动元件下方

设置文本为“收起”

2、判断当前元件文字==“收起”条件时

隐藏面板,更多选项中选择“拉动元件”,“下方”属性值,确定完成。

设置回当前文本为“收起”

四、看效果

默认显示

点“显示更多”

点“收起”效果

效果达成。

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

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

相关文章

Linux运维:MySQL数据库(1)

1.信息与数据: 数据是信息的载体,信息是数据的内涵。数据库就是存储数据的仓库,并长期存储在计算机磁盘中,可由多个用户和应用程序共享的数据集合,就是数据库。 2.数据库中的数据的特点: 2.1.数据是按照某…

【Docker】创建 swarm 集群

目录 1. 更改防火墙设置 2. 安装 Docker 组件 3. 启动 Docker 服务,并检查服务状态。 4. 修改配置文件,监听同一端口号。 5. 下载 Swarm 组件 6. 创建集群,加入节点 7. 启动集群 8. 查询集群节点信息 9. 查询集群具体信息 10. 查询…

vscode 安装Vue插件

打开扩展面板 --> 点击左侧的扩展图标,或者按下快捷键 Ctrl Shift X 搜索插件,在搜索框中输入 Vue vue-helper 用来快捷提示,如果使用elementui的话,插件不会自动提示,安装了它,组件、属性都会有提示了 Vetur V…

live555的核心数据结构值之闭环双向链表

live555是采用单进程,单线程的服务器,能够同时支持多个客户端连接,并且有条不紊的进行媒体流的调度,很大一部分原因在于对数据结构的巧妙应用。 下面介绍live555核心的数据结构:闭环双向链表 什么是闭环双向链表? 描述: 一个节点保存有前一个节点的地址和后一个节点的…

Spring自带的持久层模板类:JdbcTemplate+Spring框架声明式事务管理实战

模板技术 Spring框架中提供了很多模板类来简化编程,使用模板类编写程序会变的简单 持久层模板JdbcTemplate JdbcTemplate是什么 JDBCTemplate是Spring Framework中的一个核心类,用于简化JDBC(Java数据库连接)代码的编写。它提供…

4A的「A」会变成AI的「A」吗?

戛纳国际创意节上,广告集团WPP的全球CEO Mark Read 和英国CEO Karen Blackett 解释了WPP如何应对AIGC所带来的「威胁」。同时,Mark Read 与Elon Musk对话,讨论「技术创新的变革力量,人工智能如何重塑创造力、商业和社会&#xff0…

基于uni-app与图鸟UI的移动应用模板构建研究

摘要 随着移动互联网技术的迅猛发展,移动端应用已成为企业展示形象、提供服务的重要窗口。本文基于uni-app框架和图鸟UI设计,深入探讨了如何高效构建覆盖多个领域的移动端应用模板。通过对商城、办公、投票、生活服务等多种类型模板的详细介绍&#xff…

使用uniapp.pageScrollTo方法进行页面滚动

先看看是不是你想要的: 需求: 有个填写数据的单子在提交的时候,会对必填项做校验,如果必填项没有数据的话,必填项校验生效给出提示,并且页面滚动到第一个需要填写数据的地方。 开发: 因为这个…

Ubuntu无法安全地用该源进行更新,所以默认禁用该源。

解决方案 1. 获取并添加缺失的 GPG 公钥 可以使用 apt-key 命令来添加缺失的公钥。根据错误信息,缺失的公钥是 3B4FE6ACC0B21F32。 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3B4FE6ACC0B21F322. 更新软件包列表 添加公钥后,更…

[Go Web] Kratos 验证码业务

文章目录 1.环境准备2.验证码服务2.1 kratos 初始化验证码服务项目2.2 使用 Protobuf 定义验证码生成接口2.3 业务逻辑代码实现 1.环境准备 protoc和protoc-gen-go插件安装和kratos工具安装 protoc下载 下载二进制文件:https://github.com/protocolbuffers/protobu…

智能体实战:开发一个集成国内AI平台的GPTs,自媒体高效智能助手

文章目录 一,什么是GPTs二,开发GPTs1,目标2,开发2.1 打开 GPTS:https://chat.openai.com/gpts2.2 点击 Create 创建一个自己的智能体 2.3 配置GPTs2.4 配置外挂工具2.4.1 配置Authentication-授权2.4.1.1 生成语聚AI的…

kafka consumer客户端消费逻辑解析

kafka consumer客户端消费逻辑解析 一、主要消费步骤二、提交策略【步骤2代码解析】【提交策略总结】 三、拉取策略(待补充)四、消费策略【代码解析】【消费策略总结】 一、主要消费步骤 这是kafka客户端拉取消息的入口,有4个主要部分 1、启…

UEFA EURO 2024 GERMANY

UEFA EURO 2024 GERMANY 画个流程图,哈哈

openlayer 鼠标点击船舶,打开船舶简单弹框

背景: 对创建的地图对象,可以添加上监听事件,常用的有:地图点击事件、鼠标移动事件。 通过监听这些事件,又可以区分不同图层的不同要素,获取不同数据; 根据这些数据,又可以发起网络请…

快速阅读参考文献:kimi请求出战!

学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 上篇文章,我们为大家演示了“如何使用kimi创建论文中的流程图”。今天继续为大家介绍“使用kimi快速阅读学术参考文献”。 在学术研究的海洋中,文献阅读是一项基…

码农:如何快速融入团队

问题: 码农如何快速融入团队? 记住一个标准:能干事、能抗事。 总结一个字: 靠谱。 适用范围:新手码农、老司机码农、测试、DBA、运维、产品经理、项目经理、架构师、技术专家、。。。。适用于任何行业的打工者。 下面要…

2、逻辑回归

1. 为什么要叫逻辑回归? 逻辑回归模型的名称可能会引起一些混淆,因为它名字中包含了"回归"这个词,但实际上它是一种用于解决分类问题的模型,而不是回归问题。 逻辑回归最初是从线性回归模型演变而来的。线性回归用于预测连续的数值输出,逻辑回归则是在线性回归…

Java-记一次Springboot版本升级导致的问题

前言 根据相关情况,需要将SpringBoot的版本由原来的2.1.8.RELEASE版本升级至2.3.8.RELEASE。 启动项目后报错: 具体报错信息如下: Description: An attempt was made to call a method that does not exist. The attempt was made from the…

uni-app picker多列选项

预期实现的效果&#xff1a; 选中后的效果&#xff1a; // Dom部分 <template><picker mode"multiSelector" :range"ssqRange" range-key"name" columnchange"ssqColumnChange" change"ssqChange" class"p…

O2OA(翱途) 开发平台之HTTP端口规划

O2OA(翱途) 开发平台[下称O2OA开发平台或者O2OA]采用相对灵活的系统架构&#xff0c;支持三种服务器运行的方式。本篇主要阐述合并服务运行独立服务运行代理端口运行三种服务器运行方式。 一、先决条件&#xff1a; 1、O2Server服务器正常运行&#xff0c;系统安装部署请参考文…