axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果

昆仑女神的故事，sem优化，破产管理人

在移动端页面上，用手上下滑时，超过一定向上滑动时，菜单栏能有吸顶效果，如何用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时)，隐藏“菜单栏-复制”,接下来就是设置过程：

本文地址：转载请注明出处！

axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果相关推荐

滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...
vue音乐项目歌手页面滚动、吸顶效果
总结singer页面: 1.api中去获取 ['热',A-Z] 以及根据['热',A-Z]获取的所有歌手的数据 2.渲染数据 2.1 渲染左边字母title ['热',A-Z] + 该字母开头的歌手 ...
最贴近京东首页体验的嵌套滑动吸顶效果
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC.H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布 ...
【使用篇】WebView 实现嵌套滑动，丝滑般实现吸顶效果，完美兼容 X5 webview
本文首发我的公众号徐公,收录于 Github·AndroidGuide,这里有 Android 进阶成长知识体系, 希望我们能够一起学习进步,关注公众号徐公,5 年中大厂程序员,一起建立核心竞争力背 ...
android滑动自动吸顶效果,安卓当下最流行的吸顶效果的实现（上）
原标题:安卓当下最流行的吸顶效果的实现(上) 开始逐渐领略到ItemDecoration的美~ 今天让我使用 ItemDecoration 来完成可推动的悬浮导航栏的效果,最终实现的效果如下图: ...
vue导航栏滑动切换居中，导航栏超出部分可以滑动，点击触发滑动对应的index，且滑动时导航栏会自动对应
效果图模仿婚礼纪电子请帖模块导航栏超出部分可以滑动,点击触发滑动对应的index,且滑动时导航栏会自动对应 Html部分 <template><div class=" ...
html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果互联网发布时间:2008-10-17 19:25:02 作者:佚名我要评论英文原文:Sliding Photograph Galleries ...
html5页面学生作品,最完整长页面H5制作教程来啦！
当我们制作宣传页的时候,往往一页是不够用的,通常都需要添加好几个页面,但是在画面以及内容的表现上总是会出现细微的断层,这个时候总是会想:要是能够一个页面一直制作下去就好了,长页面H5就可以做到! 在众 ...
h5页面的认识与制作
h5页面的认识与制作相比电视.杂志.户外广告等传统媒体呈逐年下降的趋势,品牌营销在数字和移动方面的投入在逐年上升,而且,在所有渠道预算中移动技术的投入增长最快,远远高于其他渠道的增长. 移动营销已是 ...

axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果

axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果相关推荐

最新文章

热门文章