Aure8.0｜动态面板内容简单切换技巧

无论做web段还是移动端，常常会用到动态面板固定在某个区域来变换内容，达到节省空间的作用，今天分享的就是如何实现这种方式。

预览效果：

一、元件准备

以IT/互联网、设计创作、职场金融这三组为例，所涉及到的元件分别为it1（小竖条矩形）、it（标识”IT/互联网”矩形）、 design1（小竖条矩形）、design（标识“设计创作”矩形）、 finance1（小竖条矩形）、finance（标识“职场/金融”矩形）以及最后的动态面板neirong（分为三组，名称分别对应it、design、finance）。

注：小竖条矩形默认颜色是灰色的，这里填充颜色只是为了看清楚。

二、添加事件

1，将三个小竖条矩形设置选项组，名称为“标记”，并且分别添加选中事件：填充颜色 # 2CC27B。

2，将三个矩形设置选项组，名称为“课程”，并且分别添加选中事件：填充颜色 白色。

释：这里设置选项组的目的是为了当点击其中一个为选中时，其他两个就会变为不选中。

3，鼠标单击 “it（IT/互联网）” 设置动态面板neirong ，选择状态 Value，状态名称 [[this.name]]；

选中 it1和it。

将it的鼠标单击事件复制然后粘贴到“desgin（艺术设计）”、finance（职业/金融），且分别将选中对应改为 design1和design、finance1和finance。

4，针对上下拖动动态面板而不超出框架这一实现方式可以参考上一期的Axure8.0｜移动端上下滑动不出屏。

三、效果

具体效果请点击右侧网址 [http://67r9k4.axshare.com/# g=1&p=index](http://67r9k4.axshare.com/# g=1&p=index) 。

作者：乐悠悠，QQ：714226583，产品新人，目前在找工作。

关键字：Axure, 小竖条矩

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！