推广 热搜: 韩版  还可  格式  氢气  制作工艺  避暑山庄  收购ACF  求购ACF  回收ACF  液压阀 

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)

   日期:2023-08-01     浏览:42    评论:0    
核心提示:导语:今天,本文作者和大家分享一下如何通过Axure实现网站Tab导航栏切换内容页和返回顶部交互,希望看后对你能有所帮助。 我们在使用知乎时,会发现向下滚动页面,网站Tab导航栏会发生内容切

导语:今天,本文作者和大家分享一下如何通过Axure实现网站Tab导航栏切换内容页和返回顶部交互,希望看后对你能有所帮助。

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(1)

我们在使用知乎时,会发现向下滚动页面,网站Tab导航栏会发生内容切换;同时滚动超过一定距离,会出现回到顶部按钮,点击该按钮,即可返回页面顶部。

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(2)

一、实现逻辑
  1. 向下滑动页面,Tab导航栏由第一种状态切换成第二种状态;向上滑动页面,Tab导航栏由第二种状态切换成第一种状态;
  2. 页面滑动一定距离,显示回到顶部按钮,点击回到顶部按钮,页面向上滚动回到页面顶部。
二、页面构建元件准备

顶部栏两种状态及下滑页面准备,我是通过截图的方式准备的:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(3)

回到顶部按钮、鼠标移入按钮时所显示的浮窗,将该组合命名为“回到顶部-总”:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(4)

三、添加交互事件

将顶部栏的两种状态分别放入动态面板中的状态1与状态2中,将动态面板命名为statusBar;

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(5)

添加鼠标移入回到顶部按钮显示”回到顶部”气泡:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(6)

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

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(7)

其次,对窗口添加交互:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(8)

将“回到顶部-总”组合转为动态面板,将该动态面板命名为“回到顶部-总panel”,固定动态面板显示位置,并隐藏:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(9)

添加锚点元件,我们在此选择热区元件,因为热区具有透明的特性,将其命名为TopLocation:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(10)

为“回到顶部”按钮增加交互,鼠标移入显示“回到顶部”气泡,移除隐藏“回到顶部”气泡;为“回到顶部”按钮添加【单击时】用例,设置动作【滚动到元件】,选择TopLocation,垂直线性滚动500毫秒。

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(11)

四、最终效果展示

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(12)

五、补充知识

在上面交互的应用中,我们会用到Window.scrollY函数,该函数为窗口函数;窗口函数一共包括以下四种:

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

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

题图来自 Unsplash,基于 CC0 协议

,
原文链接:http://www.8178.org/news/show-108543.html,转载和复制请保留此链接。
以上就是关于axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)全部的内容,关注我们,带您了解更多相关内容。
 
打赏
0相关评论

推荐资讯
网站首页  |  VIP套餐介绍  |  关于我们  |  联系方式  |  手机版  |  版权隐私  |  SITEMAPS  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报