Axure8.0|动态面板内容简单切换技巧

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

1{3S308)0E3P$G]H_`1U{Y0

预览效果:

kk 2016-11_clip

一、元件准备

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

3Z]P$257RW_F92{QT[]A3}7

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

二、添加事件

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

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

QBBDL6DVV)VW`COQFKA${IW

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

3,鼠标单击 “it(IT/互联网)” 设置动态面板neirong ,选择状态 Value,状态名称 [[this.name]];

选中 it1和it。

TLVROU~FH8[KBQF)DVL{SPG

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

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

三、效果

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

 

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

本文由 @乐悠悠 原创发布于人人都是产品经理。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。
2人打赏

评论( 3

登录后参与评论
  1. 状态名称或序号用[[this.name]],有什么特殊含义吗,还是随便取的,小白求指导

    回复
    1. 回复

      这个是函数,如果是当前元件直接默认的就是this.name 如果是其他元件需要加元件只带 如元件time 指代成t 然后名称就是t.name

    2. 回复

      谢谢 ;-)

加载中