1. 主页 > 行业资讯 > 设计文章 >

Axure基础教程:如何在网站的Tab导航栏中切换内容

导语:今天这篇文章的作者通过Axure和大家分享一下如何在网站的Tab导航条中切换内容页面,回到顶部交互,希望看完能帮到你。

当我们使用Zhihu时,我们会发现向下滚动页面会导致网站的Tab导航栏中的内容切换;同时滚动一定距离,会出现“返回顶部”按钮。单击此按钮返回页面顶部。

一、实现逻辑

向下滑动页面,Tab导航栏由第一种状态切换成第二种状态;向上滑动页面,Tab导航栏由第二种状态切换成第一种状态;页面滑动一定距离,显示回到顶部按钮,点击回到顶部按钮,页面向上滚动回到页面顶部。

二、页面构建组件准备

顶栏两个状态和幻灯片页面的准备,我是通过截图的方式准备的:

返回到顶部按钮和鼠标移动到按钮时显示的浮动窗口,并将组合命名为“返回顶部-始终”:

第三,添加互动事件

将顶列的两个状态放入动态面板中的状态1和状态2,并将动态面板命名为statusBar;

添加鼠标移回顶部按钮显示& # 8221;重回巅峰& # 8221;气泡:

添加上下滑动页面,切换顶部状态栏;

首先,固定顶部状态栏:

第二,向窗口添加交互:

将“回顶合计”组合变成动态面板,将动态面板命名为“回顶合计面板”,固定动态面板的显示位置,隐藏:

添加锚点组件,我们这里选择热区组件,因为热区具有透明特性,所以命名为TopLocation:


为“回到顶部”按钮增加交互,鼠标移入显示“回到顶部”气泡,移除隐藏“回到顶部”气泡;为“回到顶部”按钮添加【单击时】用例,设置动作【滚动到元件】,选择TopLocation,垂直线性滚动500毫秒。
是“回到顶端& # 8221;按钮来增加交互,鼠标移动到显示“回顶”的气泡中,去掉隐藏的“回顶”气泡;为“返回顶部”按钮添加[单击时]用例,设置动作[滚动到组件],选择TopLocation,垂直和线性滚动500毫秒。

第四,最终效果显示

动词 (verb的缩写)补充知识

在上面的交互应用中,我们会用到Window.scrollY函数,这是一个Window函数;窗口功能包括以下四种类型:

Windows.width:获取浏览器的当前宽度。Windows.height:获取浏览器的当前高度。Windows.scrollX:获取浏览器的水平滚动距离。Windows.scrollY:获取浏览器的垂直滚动距离。

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/512.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息