axure9怎么让页面上下滑动_Axure 9 教程：手机端如何实现上下滑动？

左手的ㄟ右手 2023-01-10 05:16 212阅读 0赞

编辑导读：在手机端进行操作时，上下滑动是最常做的动作。想要实现这个一简单效果，背后有错综复杂的工作。本文作者将从四个方面，分析如何用更简单的方法完成上下滑动的功能，一起来看一下吧。

![b91ae7ae45fe184258f56d0e84d15c41.png][]

在网上看了很多大神的文章，学会了在手机端实现上下滑动的效果。但是有感于此功能的错综复杂，希望本文章可以用更简单的思路，帮助大家更好地理解上下滑动的功能。

一、明确

首先明确：这边只讲上下滑动，且按照我的方法，可以做出这个效果。

二、元件准备

第1步：从元件库中拖一个动态面板命名为“内容面板”高“500”。

![e5039523612895fb3ac0791f6508c57d.png][]

第2步：在第1步的“内容面板”动态面板中再加一个动态面板，叫”拖动面板“，高“800”。最后效果中显示的页面内容，是添加在这个拖动面板里面的。

![f0ce40eddd6fdbf00b5f95acf69ab0fb.png][]

三、滑动原理

我们来理解一下上下滑动的原理：

向上滑动时，拖动面板在y轴的活动范围是：-300；顶部边界是≥-300，且≤0;

向下滑动时，拖动面板在y轴的活动范围是：300；底部边界是≥500，且≤800;

![20849d15da9fc4f21a1b00534b36866c.png][]

四、添加交互事件

选中“内容面板”动态面板，添加交互事件如图：

注意：选中的是“内容面板”动态面板，目标元件是“拖动面板”动态面板，事件是“向上滑动”

移动范围是：y轴上-300的距离(即“内容面板”和“拖动面板”的高度差)

添加边界：顶部边界≥-300，顶部边界≤0

添加动画效果：线性，500毫秒

![2b40a3f5df55e84897784ba24d96f29e.png][]

继续选中“内容面板”动态面板，添加交互事件如图：

选中的是“内容面板”动态面板，目标元件是“拖动面板”动态面板，事件是“向下滑动”。

移动范围是：y轴上300的距离(即“拖动面板”和“内容面板”的高度差)

添加边界：底部边界≥500，底部边界≤800

添加动画效果：线性，500毫秒

![0064375b1b889a0fed3cc99679d2889f.png][]

这样，手机端上下滑动的功能就大致实现了。

结语：实际操作中，大家制作的面板高度各不相同，但只要理解这个意思，自行加减高度，就可以实现滑动效果。

本文由 @Elsa 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

给作者打赏，鼓励TA抓紧创作！赞赏

[b91ae7ae45fe184258f56d0e84d15c41.png]: /images/20221119/ea1241ecc2b74bbbb827fa7f71a0c5ac.png
[e5039523612895fb3ac0791f6508c57d.png]: /images/20221119/6811cb48e0e849aa8d85fcb1ff8b63f9.png
[f0ce40eddd6fdbf00b5f95acf69ab0fb.png]: /images/20221119/e997aba1e3e441249a8721f5f0e1532a.png
[20849d15da9fc4f21a1b00534b36866c.png]: /images/20221119/164c158758d3464595fdbe089dffc9f3.png
[2b40a3f5df55e84897784ba24d96f29e.png]: /images/20221119/0323677b0fdf414eb52248daefb0f251.png
[0064375b1b889a0fed3cc99679d2889f.png]: /images/20221119/0584cd4269164b529e677796117f508b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关一行CSS实现页面上下滑动【scroll-behavior: smooth；】

实现上下滑动的主要属性：scroll-behavior: smooth; 一般添加在html或者body标签上代码直接复制测试 <!DOCTYPE html

Myth丶恋晨/ 2023年09月25日 22:57/ 0 赞/ 56 阅读

相关 AXURE 9 # 汉化教程

Axure RP的版本是9.0.0.3675 汉化包汉化教程：【1】将汉化压缩包解压缩。【2】将解压缩后的lang文件夹（软件汉化文件）、DefaultSett

男娘i/ 2023年02月21日 11:51/ 0 赞/ 18 阅读

相关 axure9怎么让页面上下滑动_Axure 9 教程：手机端如何实现上下滑动？

编辑导读：在手机端进行操作时，上下滑动是最常做的动作。想要实现这个一简单效果，背后有错综复杂的工作。本文作者将从四个方面，分析如何用更简单的方法完成上下滑动的功能，一起来看一下

左手的ㄟ右手/ 2023年01月10日 05:16/ 0 赞/ 213 阅读

相关 uniapp实现页面左右滑动，上下滑动事件

实现代码： <view class="" @touchstart="touchstart" @touchend="touchend"> </view>

忘是亡心i/ 2022年11月18日 02:29/ 0 赞/ 644 阅读

相关 GestureDetector封装手势检测上下滑动

项目中需要检测ListView的上滑下滑隐藏顶部View控件，之前在网上也有很多实现案例。在git上发现个封装很不错的例子，记录下来。 GestureDetecto

╰+攻爆jí腚メ/ 2022年08月01日 11:20/ 0 赞/ 251 阅读

相关 JS实例-图片上下滑动

JS练习实例-自动上下滑动图片效果图： ![图片上下滑动][20161007100502577] <!DOCTYPE html> <html>

水深无声/ 2022年07月16日 05:12/ 0 赞/ 187 阅读

相关 swiper入门小练习-移动端实现上下滑动翻整个页面（一）

这几天在做一个Ht5的小页面，涉及到动画和滑动，所以研究了一下swiper, swiper可以滑动和动画。现在来做一个swiper入门小练习。 1.首先在Hbu

红太狼/ 2022年06月10日 04:38/ 0 赞/ 448 阅读

相关 uni-app页面上下滑动关闭(页面回弹问题)

这个问题很烦,因为上下拉的时候会出现空白页,很难看！我一开始以为是上拉/下拉刷新没关,但后面试了很多方法都没用,查看官方文档的时候很诡异,在app-plus下有一个回弹属性,将

女爷i/ 2022年02月26日 18:16/ 0 赞/ 1241 阅读

相关 Axure8 实现移动端页面上下滑动效果

目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Ax

刺骨的言语ヽ痛彻心扉/ 2021年11月11日 05:08/ 0 赞/ 465 阅读

相关 CSS3实现左右摆动和上下滑动

1、上下滑动 award { position: absolute; top:

秒速五厘米/ 2021年11月05日 13:28/ 0 赞/ 680 阅读