Axure案例分享—折叠面板(附下载地址)

今天和大家分享的Axure案例是折叠面板

折叠面板是移动端APP中常见的组件之一,有时候也称之为手风琴。咱们先看下Axure画出的折叠面板原型效果,然后再对该组件进行详细讲解。
在这里插入图片描述
一、功能介绍

折叠或展开多个面板内容,默认为展开一项内容,点击任一收起的选项,展开面板,点击已展开的选项,收起面板

二、制作过程

1、制作原型

原型是由矩形组件以及动态面板构成,

拖入三个矩形组件分别命名为“1”、“2”、“3”,双击矩形输入相应的文字,在三个矩形中分别拖入三个动态面板,分别命名为”箭头1“、”箭头2“和”“箭头3”,每个动态面板中为两个状态,分别加入“上”和“下”两个箭头标识,在每个矩形下方拖入分别拖入动态面板,分别命名为“1”、“2”、“3”,在动态面板中输入内容,如图:
在这里插入图片描述

2、交互设计

(1)矩形“1”交互设置

点击矩形“1”对其“鼠标点击时“设置选中状态为”toggle“,

“选中改变时”设置

if 选中状态于 This == true

显示动态面板“1”,动画为向下滑动,时间为100ms,更多选项为推动元件,方向为下方,动画为线性,时间为100ms

设置动态面板“箭头1”为下,显示其面板,

if 选中状态于 This == false

隐藏动态面板“1”,动画为向上滑动,时间为100ms,拉动元件,方向为下方,动画为线性,时间为100ms

设置动态面板“箭头1”为上,显示其面板

在这里插入图片描述

(2)矩形“2”交互设置

点击矩形“2”对其“鼠标点击时“设置选中状态为”toggle“,

“选中改变时”设置

if 选中状态于 This == true

显示动态面板“2”,动画为向下滑动,时间为100ms,更多选项为推动元件,方向为下方,动画为线性,时间为100ms

设置动态面板“箭头2”为下,显示其面板,

if 选中状态于 This == false

隐藏动态面板“2”,动画为向上滑动,时间为100ms,拉动元件,方向为下方,动画为线性,时间为100ms

设置动态面板“箭头2”为上,显示其面板

在这里插入图片描述

(3)矩形“3”交互设置

点击矩形“3”对其“鼠标点击时“设置选中状态为”toggle“,

“选中改变时”设置

if 选中状态于 This == true

显示动态面板“3”,动画为向下滑动,时间为100ms,更多选项为推动元件,方向为下方,动画为线性,时间为100ms

设置动态面板“箭头3”为下,显示其面板,

if 选中状态于 This == false

隐藏动态面板“3”,动画为向上滑动,时间为100ms,拉动元件,方向为下方,动画为线性,时间为100ms

设置动态面板“箭头3”为上,显示其面板

在这里插入图片描述

下载地址:https://download.csdn.net/download/weixin_43516258/88998795

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

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

相关文章

K8s-网络原理-中篇

引言 本文是《深入剖析 K8s》的学习笔记,相关图片和案例可从https://github.com/WeiXiao-Hyy/k8s_example中获取,欢迎 ⭐️! 上篇主要介绍了 Flannel 插件为例,讲解了 K8s 里容器网络和 CNI 插件的主要工作原理。还有一种“纯三层”的网络方…

C语言程序与设计——预处理命令

宏 在C语言中宏有三种形式: 定义符号常量定义傻瓜表达式定义代码段 在使用宏的过程中需要注意的是,宏的作用仅仅是在预处理阶段对代码进行替换,而非进行运算,所以在使用时,如果出现了我们预期之外的结果,很有可能是宏…

Java代码基础算法练习-搬砖问题-2024.03.25

任务描述: m块砖,n人搬,男搬4,女搬3,两个小孩抬一砖,要求一次全搬完,问男、 女、小孩各若干? 任务要求: 代码示例: package M0317_0331;import java.util.S…

【Android】图解View事件分发机制

文章目录 View事件分发机制dispartchTouchEvent()dispatchTouchEvent() 方法主要负责什么? onTouchEvent(event) 点击事件分发的传递规则自上而下自下而上 View事件分发机制 View的事件分发机制是Android中非常核心的一个概念,它负责处理触摸事件&#…

SpringMVC | Spring MVC中的“拦截器”

目录: 一、拦截器 :1. 拦截器的 “概述”2. 拦截器的 “定义” (创建“拦截器”对象)3. 拦截器的 “配置” (让“拦截器”对象生效)4. 拦截器的 “执行流程”“单个拦截器”的执行流程“多个拦截器”的执行流程 二、应用案例一实现用户登录权限验证 作者简介 &#…

nav仿真(2)

开启仿真和建图 打开第一个窗口启动仿真: source devel/setup.bash export TURTLEBOT3_MODELburger roslaunch turtlebot3_gazebo turtlebot3_world.launch # 启动仿真打开第二个窗口,开始建图: source devel/setup.bash export TURTLEBOT3_…

举4例说明Python如何使用正则表达式分割字符串

在Python中,你可以使用re模块的split()函数来根据正则表达式分割字符串。这个函数的工作原理类似于Python内置的str.split()方法,但它允许你使用正则表达式作为分隔符。 示例 1: 使用单个字符作为分隔符 假设你有一个由逗号分隔的字符串,你可…

Redis入门到实战-第三弹

Redis入门到实战 Redis数据类型官网地址Redis概述Redis数据类型介绍更新计划 Redis数据类型 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的(采用BSD许可证&#…

用大语言模型控制交通信号灯,有效缓解拥堵!

城市交通拥堵是一个全球性的问题,在众多缓解交通拥堵的策略中,提高路口交通信号控制的效率至关重要。传统的基于规则的交通信号控制(TSC)方法,由于其静态的、基于规则的算法,无法完全适应城市交通不断变化的…

Unity 学习日记 8.2D物理引擎

1.2D刚体的属性和方法 2.碰撞器

MySQL -- 开窗函数 row_number 之 先根据名字分组,然后再根据分数排序

目录 开窗函数 row_number需求: 先根据名字分组,然后再根据分数排序 开窗函数 row_number 需求: 先根据名字分组,然后再根据分数排序 sql写法及解释: 可以再加子查询进行条件判断 函数用法解释:

登录注册界面

T1、编程设计理工超市功能菜单并完成注册和登录功能的实现。 显示完菜单后&#xff0c;提示用户输入菜单项序号。当用户输入<注册>和<登录>菜单序号时模拟完成注册和登录功能&#xff0c;最后提示注册/登录成功并显示注册信息/欢迎XXX登录。当用户输入其他菜…

Redis - 高并发场景下的Redis最佳实践_翻过6座大山

文章目录 概述6座大山之_缓存雪崩 &#xff08;缓存全部失效&#xff09;缓存雪崩的两种常见场景如何应对缓存雪崩&#xff1f; 6座大山之_缓存穿透&#xff08;查询不存在的 key&#xff09;缓存穿透的原因解决方案1. 数据校验2. 缓存空值3. 频控4. 使用布隆过滤器 6座大山之_…

K8s的Pod出现Init:ImagePullBackOff问题的解决,(以calico网络插件为例)

问题描述&#xff1a; 对于这类问题的解决思路应该都差不多&#xff0c;本文以calico插件安装为例&#xff0c;发现有个Pod的镜像没有pull成功 第一步&#xff1a;查看这个pod的描述信息 kubectl describe pod calico-node-t9rql -n kube-system从上图发现是docker拉取"…

H3C技术大全复现之高级路由交换技术 1

华子目录 VLAN 基本技术VLANIEEE 802.1Q交换机端口类型MVRP协议实验测试 VLAN扩展技术Super VLAN产生背景Super vlan&#xff08;相当于vlanif接口&#xff0c;也属于虚拟接口&#xff0c;可以充当网关&#xff09;Sub vlan&#xff08;普通vlan&#xff09;关于代理ARP普通代理…

了解和使用无操作系统和平台驱动程序

快速发展的技术需要软件支持&#xff08;固件驱动程序和示例代码&#xff09;来简化设计过程。本文介绍了如何使用 no-OS&#xff08;无操作系统&#xff09;驱动程序和平台驱动程序来构建具有 Analog Devices 模数转换器和数模转换器的应用固件&#xff0c;这些转换器在以下方…

Docker之docker compose!!!!

一、概述 是 Docker 官方提供的一款开源工具&#xff0c;主要用于简化在单个主机上定义和运行多容器 Docker 应用的过程。它的核心作用是容器编排&#xff0c;使得开发者能够在一个统一的环境中以声明式的方式管理多容器应用的服务及其依赖关系。 也就是说Docker Compose是一个…

docker安装WireGuard服务

启动 WireGuard 如下异常 则是linux内核需要升级 $ wg-quick down wg0 $ wg-quick up wg0 Error: WireGuard exited with the error: Cannot find device "wg0" This usually means that your hosts kernel does not support WireGuard!at /app/lib/WireGuard.js:65…

unicloud 云函数 介绍及使用

普通云函数 callFunction方式云函数&#xff0c;也称之为普通云函数。 uni-app的前端代码&#xff0c;不再执行uni.request联网&#xff0c;而是通过uniCloud.callFunction调用云函数。 callFunction方式避免了服务器提供域名&#xff0c;不暴露固定ip&#xff0c;减少被攻击…