美文网首页
AXURE教程-页签切换的实现方式

AXURE教程-页签切换的实现方式

作者: juanerdaydayup | 来源:发表于2019-07-10 09:44 被阅读0次

        页签切换的功能在产品设计中经常会用到,比如导航切换、页面内的TAB页签切换等。那么,在Axure中如何实现?在原型绘制过程中,页签切换的实现方式有多种,这次来和大家分享一种最近新学的实现方式。

        这种实现方式主要通过运用设置页签选项的交互样式、对页签选项设置选项组、动态面板的方式来实现。比如下面是我们最终要实现的效果:

要实现以上效果,我们分步来操作:

一、设置页签选项的交互样式,来区分页签选项在鼠标悬停、选中/未选中下样式的不同。

1.从元件库拖矩形出来作为页签选项,并分别命名。另拖一条水平线出来做装饰;

2.选中四个矩形,设置为无边框;

3.选中第一个页签选项,设置鼠标悬停和选中状态下的交互样式后,确定保存。后面的页签也做相同的设置;

4.默认页面载入状态下,第一个页签选项被选中,所以要做如下设置:

二、通过设置选项组,来实现当选择一个页签选项时,其他页签选项不会被选中。

1.全选四个页签选项,点击鼠标右键,在弹出的菜单中选择“设置选项组”,输入选项组名称后确定即可。

三、通过动态面板,来实现不同页签选项对应不同的页面。

1.从元件库中拖一个动态面板,双击动态面板,在弹出的对话框中,对动态面板命名并增加四个状态;

2.双击每个面板状态,对不同的面板状态设置对应的页面。

四、通过设置交互属性,实现页签切换时的动作交互。

1.选中第一个页签选项【全部】,设置鼠标单击时的动作交互:(1)设置面板状态,选择“审核状态”的动态面板,设置其状态为“全部”;(2)设置选中状态,设置当前元件的选中状态值为ture。

        2.同理,设置其余三个页签选项对应的鼠标单击时的动作交互,包括对应的动态面板状态和当前元件的选中状态。

        按照以上步骤完成操作后,预览即可得到目标效果。大家有什么更好更实用的方法吗,来一起分享交流吧!

相关文章

  • AXURE教程-页签切换的实现方式

    页签切换的功能在产品设计中经常会用到,比如导航切换、页面内的TAB页签切换等。那么,在Axure中如何实现?在原...

  • 2018-08-16使用router-view同页面加载多路由

    描述:用路由方式实现单页面加载多页面,并且切换页面后状态还是保存的,类似于单页面实现标签页,切换标签页实现内容显示...

  • 淘宝页签切换效果

    淘宝页签的切换效果包括动态面板、热区的应用。 【效果图】 【思路分析】 利用动态面板状态的切换实现快速登录与账号密...

  • Fragment懒加载的探究和实现

    前言在Android开发中,利用ViewPager+Fragment实现页签的切换几乎是每个app的必备功能,虽然...

  • Axure实现点击切换面板显隐

    概述 Axure中实现点击一个按钮,按钮状态切换,并切换面板的显隐。 效果 实现后如下图所示: 实现 切换到概要面...

  • Vue keep-alive按需缓存页面

    场景:在多页签模式或移动单页面应用中,我们往往希望在页签之间切换时保留前一个页签的操作(缓存页面),在关闭页签时清...

  • AXURE-组件-001-TAB

    本期小组件为一个常用的选项卡(页签)切换组件,效果如下: 实现方式 1.首先添加相关组件,主要内容区为动态面板。具...

  • 为TabLayout添加角标的最简单方法

    一、前言 在开发中,我们常常需要ViewPager结合Fragment一起使用,来实现多页签的切换效果。在以前,我...

  • 2019-10-08

    antd-pro 多页签模式实现 基于antd Tabs组件实现多页签模式。github:https://gith...

  • iOS 13系统WKWebview滚动冲突问题

    我们的APP首页是类似今日头条的多页签布局, 可以横行滚动界面切换页签, 其中一个页签内有一个WKWebview子...

网友评论

      本文标题:AXURE教程-页签切换的实现方式

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