Axure制作:页面上下滑动时的菜单栏悬浮吸顶效果

来源: | 浏览量:12 次 | 发布时间:2019-02-22 13:21

在移动端页面上,用手上下滑时,超过一定向上滑动时,菜单栏能有吸顶效果,如何用axure实现呢?

作者在最近在手机移动端的时候,有一个动画,希望达到效果:用手上下滑页面时,超过一定向上滑动时,菜单栏能有吸顶效果,这个效果相信不用我多说,都应该懂,但是如何用axure实现呢?

因为不会,先看了网上的教程,但是网上的教程都是以网页滚动,坦白说都是pc端的交互效果。

当然如果对于新手小白来说,直接拖出来一个动态面板,然后让其显示滚动条,就可以很简单的达到滚动效果,然后设置菜单栏超过一定的滚动距离时,吸顶就可以。

没有超过一定滚动距离,就保持原来的位置就可以,这里面主要设计的是scrollY这个函数(页面滚动时用的windows.scrollY函数)。

(点击动态面板的属性栏)

(大家可以去试试,当动态面板加上这个滚动条时,就可以自己实现内容的滚动效果)

前面是给大家温习一下网上的教程,接下来就来讲一下我所制作的app端页面拖动上下滑效果。

我就以拉勾网为例,具体大家可以看一下拉钩app首页就行。

准备素材:

1. 手机素材:不用说了,这就是我们的框架

2. 主动态面板:你可以把它理解为用手滑的那块屏幕

3. 滑动的面板:内容的承载面板,将完整内容都放入这个面板里

4. 菜单栏:

菜单栏准备两份,大家可以看下面这个图,记住,一摸一样的准备两份,一份放入在滑动的面板中,一份则放在滑动的面板外(放置图层顶端,默认隐藏状态),可以看一下图中的层级关系。

滑动的面板——内容准备

5. 用到的函数:this.y(元件的纵坐标,没错就是这么简单)

准备材料都知晓后,接下来就要开始我们的交互设置:

1. 首先,我们要作出用鼠标拖动主面板时,内容可以上下滑动,这一步很简单:定位到主面板元件-拖动时-移动-滑动的面板-垂直拖动-确定,设置完成,大家可以预览一下,现在我们的内容是不是可以自由的上下拖动了。

2. 第二步,我们要现在脑子中有一个逻辑判断:因为菜单栏在滑动的面板中的y坐标为281(我自己设置的),所以,当向上拖动距离大于281时,是不是菜单栏就要有吸顶效果了;当向上拖动距离小于281时,菜单栏是不是该在哪个位置,还在哪个位置。

那如何体现我上下拖动的距离呢?那就是用前面我们说的“this.y”函数,指的是元件的y坐标轴。按照我的流程来的小伙伴,有没有注意到,滑动的面板的坐标轴是(0,0),意思是这里面的元件的坐标都是按相对位置来算了,是在主面板里又定位了一套坐标轴,那同理滑动面板里的元件也都是在滑动面板下从新定位的一套。

滑动的面板坐标

所以,滑动面板里的菜单栏的位置为(7,281),意味着当滑动的面板向上滑动距离大于281时(滑动的面板.y=<-281时),显示“菜单栏-复制”;当上滑距离小于281(滑动的面板.y>=-281时),隐藏“菜单栏-复制”,接下来就是设置过程:

对滑动的面板设置

对滑动的面板设置

设置不满足时隐藏菜单栏

那么,设置完毕,大家就可以预览一下效果了,非常简单,你学会了吗?

原型在线浏览:https://woqt8g.axshare.com

插句题外话:为什么我不用”this.scrollY”这个函数,因为这个函数指的是上下滚动的距离,不是拖动的距离,大家不要搞混了,当动态面板有滚动条的时候,那个上下滑的距离可以用scrolly来表示,但是拖动不会变化scrolly的值,这个你可以用数字显示的形式去观察一下。

以上就是我做的适合移动端的吸顶交互效果。

 

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

题图来自Unsplash,基于CC0协议



本文永久链接:http://www.18261.cn/g/b/576141.html

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;
2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;
3.作者投稿可能会经我们编辑修改或补充。