Axure教程:实现移动端页面上下滑动效果
zhezhongyun 2024-12-26 17:42 60 浏览
编辑导语：产品中我们经常会遇到上下滑动的页面，比如我们在进行预览页面时，需要上下滑动进行查看；本文作者分享了关于实现移动端页面上下滑动效果的Axure教程，我们一起来了解一下。
案例展示：https://ctm29p.axshare.com/#id=1btojr
工具：Axure RP9
本文章会介绍2种实现页面上下滑动效果的方法（学会这两种方法就够用了）。
01 方法一：（超级便捷）
这个方法重点是利用了“动态面板”的“滚动条”垂直滚动的功能是实现内容上下滑动的效果。
设计思路如下：
1. 先画出页面基本结构
如下图：基于（375*667）iPhone8的宽高，顶部和底部2个矩形（375*50），中间1个动态面板（375*567）。
2. 对动态面板进行设置（重点来了）
1）填充滚动预览的内容：双击【动态面板】，进入state1，然后再里面那个框框里填东西，使劲填，至少要填超过动态面板的高度。
2）实现内容滚动：关闭state1，然后选中【动态面板】右击选中【滚动条】选择【垂直滚动】。
或者如下图操作：
点击“预览”，上下滑动的效果就实现了，so easy！但是你会发现中有一条滚动条在右边好抓狂，影响美观。
3）隐藏滚动条：我们可以用一个矩形这个滚动条给遮挡起来（魔高一尺道高一丈，(￣▽￣)／嘚瑟）如下图：
点击预览，完美。
02 方法二：（没有滚动条的烦恼）
这个方法比方法一稍微难理解一丢丢，可以跟着下面的操作步骤一边操作一边理解额。
这个方法是在于对动态面板2的内容会跟随操作动态面板1的滚动而移动，并对滑动界限设置。
设计思路如下：
gif动态来源于：http://www.woshipm.com/rp/420885.html
1. 先画出页面基本结构
一如既往先画个模型，如下图：基于（375*667）iPhone8的宽高，顶部和底部2个矩形（375*50），中间1个动态面板1（375*567），再在动态面板1的state1中添加一个动态面板2（375*567）。
2. 渐进明细
1）在动态面板2的state1中填充内容；使劲填充内容，至少要填超过动态面板1的高度，完成后才能看到滑动效果。
2）拖动 动态面板1 时，动态面板2跟随垂直拖动而移动；选中【动态面板1】点击【新建交互】选中【拖动时】-【移动】目标选择“动态面板2”，移动选择“跟随垂直拖动”点击“完成”，如图下设置：
3）拖动结束 动态面板1时，如果动态面板2未接触到顶部矩形时，移动动态面板2开头回到顶部。
- 选中【动态面板1】点击【新建交互】选择【拖动结束时】点击【启用情形】；
- 添加情形1：如果范围于 动态面板2 未接触 范围于 顶部矩形；
- 在情形1下添加动作：【添加动作】-【移动】动态面板2 到达 (0,0) 点击“完成”；如下图设置：
4）拖动结束 动态面板1时，如果动态面板2未接触到底部矩形时，移动动态面板2结尾回到底部；操作步骤和（3）基本一致。
- 在【拖动结束时】添加情形2：如果范围于 动态面板2 未接触 范围于 底部矩形；
- 在情形2下添加动作：【添加动作】-【移动】动态面板2 到达 (0,-222) 点击“完成”；如下图设置：（tip：动态面板1的高 – 动态面板2的高 = -222）。
点击预览，完美。
终于写完了o(╥﹏╥)o，希望也能帮到有缘的你们额。
本文由 @人事匆匆 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
相关推荐
- Qt setAttribute设置窗口属性（qt设置窗口名字）
-
this->resize(500,400);this->setWindowTitle("主窗口");QLabel*label=newQLabel(...
- 利用Axure+js创建可配置地图页面（axure制作app界面）
-
编辑导语：如何利用Axure实现自定义地图展示？本篇文章里，作者结合Axure与高德地图，对如何在Axure中设置相应参数、进而预览时实现自定义地图展示效果的操作流程进行了示范和总结，一起来看一下。本...
- Excel如何获取所有类型的工作表，详细编程方法介绍
-
No.1Excel可以创建不同类型的工作表，编程中会遇到返回某一类型的工作或所有类型的工作表，对表进行操作，那么如何得到想要的工作表呢？下面介绍一个方法。首先要认识一下Sheets对象，它表示工作簿中...
- VBA中的常用单元格引用方式（vba中单元格的引用方法）
-
VBA编程经常和“对象”打交道，其中最频繁的对象大概就是“单元格”了。（听说您还没有对象？那……我想你大概需要一份Excel，包邮988……）今天我们就来聊一下单元格的各种引用方式，比如单个单元格、行...
- 强烈安利试试这个!效果爆炸的漫画变身AI，火到服务器几度挤爆
-
金磊丰色发自凹非寺量子位报道|公众号QbitAI“排队1241人，等待2600秒……”——这届网友为了看一眼自己在动漫里的样子，可真是拼了！“始作俑者”是一款可以把人像变动漫的生成器。只...
- 软网推荐:为窗口控制菜单添加扩展控制命令
-
当我们点击Windows标准窗口（如记事本、资源管理器等）左上角的窗口控制按钮时，会弹出一个含有窗口控制基本命令的菜单，其中包括移动、大小、最小化、最大化、关闭等窗口控制命令。如果我们觉得这些命令不能...
- 45、VBA字典去重，两种不同的方法在实战中的运用(VBA进阶)
-
1、在VBA字典去重的操作中，若程序仅需要使用key值，那么无论采用哪种方法都不会有问题；但如果需要获得对应的item值，就必须根据实际需求选择合适的方法了。学VBA要知其然而知其所以然，不能似懂非懂...
- Excel VBA学习笔记:合并单元格的相关操作
-
合并单元格，一个在工作中很常见的，但是是令写（工作表）公式和VBA代码的人都很不喜欢的东东，今天来讲讲与它相关的操作语法。1、Range("A1:B2").Merge；合并A1到B2单...
- 软网推荐:图片编辑 小而不凡（秽的读法）
-
说起图片编辑小工具，咱手边就有个“画图”软件。但是，这个工具比较简单，对于处理透明背景、应用滤镜效果、添加边框、做拼接图和全景照、图层操作等，就无能为力了。同样是小软件，PhotoPad就能满足上述需...
- Android弹软键盘时之ListView的变化控制
-
前几天有个人问我，说在最底下有个输入框，弹出键盘时整个界面都一起跟着移动，上面的标题栏都移到上面看不到了，界面非常难看。其实这种问题一般存在于这样的界面布局中那就是，上面是标题栏，中间是Listvie...
- 如何将数组值传递到工作表中（怎么传数组）
-
【分享成果，随喜正能量】不与别人盲目攀比，自己就会悠然自得;不把人生目标定得太高，自己就会欢乐常在;不刻意追求完美，自己就会远离痛苦;不是时时苛求自己，自己就会活的自在;不每每吹毛求疵，自己就会轻轻松...
- 【VBA入门必备】Offset和Resize这样用，工作效率翻3倍!
-
大家好！今天共同学习下VBA中单元格属性Offset和Resize操作。一、Offset：单元格的"导航仪"功能说明：以当前单元格为坐标原点，灵活跳转位置语法格式：单元格.Offset...
- 50道阿里巴巴MySql经典面试题(附答案)
-
1、MySQL中有哪几种锁？1、表级锁：开销小，加锁快；不会出现死锁；锁定力度大，发生锁冲突的概率最高，并发度最低。2、行级锁：开销大，加锁慢；会出现死锁；锁定粒度最小，发生锁冲突的概率最低，并发度...
- 如何在Vue3项目中集成ESLint+Prettier+Stylelint+Husky?
-
随着前端工程化的发展,前端代码规范也显得越来越重要,所以作为一个前端对于这方面还是需要有一定的了解的。本篇文章将带大家使用ESLint+Prettier+Stylelint+Husky从零搭建一个Vi...
- SpringBoot 中 Json 格式化配置（springboot json转对象）
-
SpringBoot针对jackson是自动化配置的，如果需要修改，也可以自定义配置。0x01：通过application.yml配置属性说明：spring.jackson.date-form...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)