美文网首页
axure 8 -- 底部Tabar

axure 8 -- 底部Tabar

作者: 等等4321 | 来源:发表于2020-01-15 21:00 被阅读0次

效果展示

实现步骤:

1. 构造一个基础Tab:使用【标签】和【矩形】元件,

2. 组合元件:选中三个元件,【右击】选择【组合】

3. 添加Tab选中样式:选中当前【组合】,【侧边面板】选择【属性】,滚动到【交互样式设置】,设置【选中】时的状态

4. 添加跳转链接:【侧边面板】切换到属性,选择【鼠标单击时】,设置跳转链接

5. 构造完整Tab,复制n次【基础Tab组合】,分别设置其特性

6. 创立Tabar母版:选中以上组合,【右击】选择【转换母版】,并且由于Tabar永远固定于页面底部,所以在弹出面板中选择【固定位置】

7. 设置切换效果:将母版分别放置到【首页】【游戏】【更新】...页面中,在【侧边栏】双击【页面载入时】,在【添加动作】中设置【设置选中】和【启用/禁用】的值,规则为:

    1). 设置选中:当前页面【Tab组合】值设置为true,其余全部设置为false

    2). 启用/禁用:禁用当前页面的【Tab组合】,其余全部设置为启用,当前页面不点击本身

    3). 顺序非常重要,先设置选中状态,在设置启用禁用(我默认为是软件bug)

8. Tips:因为我生成的动态面板高度和宽度都是手机的尺寸,所以会影响滚动区的操作,是由于Tabar的层级问题,造成了遮挡,所以在设置其层级为至于底部,就OK了

Yeah,进一寸有进一寸的欢喜~

相关文章

网友评论

      本文标题:axure 8 -- 底部Tabar

      本文链接:https://www.haomeiwen.com/subject/mehxzctx.html