axure如何页面滑动时广告位上移_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果...

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

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

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

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

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

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

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

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

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

准备素材&＃xff1a;

1. 手机素材&＃xff1a;不用说了&＃xff0c;这就是我们的框架

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

3. 滑动的面板&＃xff1a;内容的承载面板&＃xff0c;将完整内容都放入这个面板里

4. 菜单栏&＃xff1a;

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

滑动的面板——内容准备

5. 用到的函数&＃xff1a;this.y(元件的纵坐标&＃xff0c;没错就是这么简单)

准备材料都知晓后&＃xff0c;接下来就要开始我们的交互设置&＃xff1a;

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

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

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

滑动的面板坐标

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

对滑动的面板设置

对滑动的面板设置

设置不满足时隐藏菜单栏

那么&＃xff0c;设置完毕&＃xff0c;大家就可以预览一下效果了&＃xff0c;非常简单&＃xff0c;你学会了吗&＃xff1f;

原型在线浏览&＃xff1a;https://woqt8g.axshare.com

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

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

本文由 &＃64; 海涛 原创发布于人人都是产品经理。未经许可&＃xff0c;禁止转载

题图来自Unsplash&＃xff0c;基于CC0协议

给作者打赏&＃xff0c;鼓励TA抓紧创作&＃xff01;赞赏