axure简单实现移动端下滑和上滑功能

最新推荐文章于 2025-02-10 14:30:34 发布
最新推荐文章于 2025-02-10 14:30:34 发布
阅读量4.2k 收藏 1
点赞数
分类专栏： Axure
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jkjkre/article/details/74975337
版权
本文介绍了如何使用Axure简单实现移动端的下滑和上滑功能。通过设置移动面板的位置、参数以及交互用例，实现了滑动面板在规定范围内的上下滑动。详细步骤包括拖动面板设置、控制面板编辑、矩形展示、交互用例参数配置以及上标和下标的设定。预览效果良好，适合初学者参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

axure简单实现移动端下滑和上滑功能

01

拖动移动面板，设置大小。位置x:0，y:0;     

blob.png

02

双击控制面板，出现控制面板编辑状态

blob.png

03


这里随便放拉一个矩形展示效果。

blob.png


04

接下来，该设置参数啦。双击交互用例“拖动”

blob.png


blob.png


04

做到这一步，发现矩形已经可以滑动啦。但是它的上下位置无法再规定范围内移动，很明显，这不符合逻辑。这时我们继续用滑动面板给它设置一个上标和下标，作为界限。

blob.png

注意命名哦，不然很容易混淆

blob.png

04

接下来给它设置参数，分为未接触时和接触时，具体参数设计如下。

blob.png


这里解释一下上标和下标。当图片没有接触到上标时候，也就是脱离了最顶端，这不行，图片得赶紧回去。所以设置-10px让它会到顶端，这时就出现一种力，让你你拽不下来。点击发布预览效果


第一次写博客，有不足的地方希望各位多指出微笑



菜鸟笔记---axure9 动态面板 移动端上下滑屏
lirm668的博客
08-05 3166
在网上找了好久如何实现原型手机端上下滑动，各种攻略看的呀，方法都不一样，版本也不一样，试了半天都没成功，看的多了，知道个大体动态面板的操作路径了，才最终成功。（成功1.0，实现了滑动，但是细节控制的不太好） 首先，动态面板编辑路径 axure动态面板编辑的路径，作为小白的我，一直找不到怎么编辑，差点就放弃了。这里把本次需要用到的操作简单描述一下 1、default基本元件中找到【动态面板】 2、拖一个动态面板页面； 3、双击这个【动态面板】进入动态面板的编辑界面（上面有一条蓝绿色的条，表示进来了）
Axure8 实现移动端页面上下滑动效果
热门推荐
Amydom的博客
01-13 6万+
目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的,千万不要说原型中做复杂的交互效果会浪费时间,不是每个队友都能理解你的想象和诠释,沟通成本更可怕...所以,连熟了Axure,在复杂的效果也只是分分钟的事.... 准备工作: 1.将Rectangl
（一）Axure制作移动端登录页面
最新发布
java程序员的蜕变之路
02-10 584
你知道如何利用Axure制作移动端登录页面吗？Axure除了可以制作Web端页面，移动端也是可以的哦，下面我们就一起来看一下Axure制作移动端登录页面的过程吧。
Axure实现手机上滑功能
产品阿强
11-28 996
相信绘制手机app端原型的伙伴们，经常会遇到内容不止一屏展示，需要上滑查看更多的需求，那么如何绘制一个手机上滑实现更多内容查看的功能呢，如果使用的是墨刀，墨刀软件是自己支持的，如果使用的是axure，那么就需要自行实现了，好了，废话不多说，现在开始说一下实现的步骤 其实原理很简单，使用的是动态面板的滑动条功能 首先，需要将需要实现滑动的内容转化为动态面板 然后按住动态面板的拖动高度的键，将动态面板调整至合适的高度 将动态面板设置成自动显示垂直滚动条 拖动动态面板横向的按键将滚动条正..
Axure-制作App上下滑动效果
LisztCoder的博客
11-16 4195
原文:http://www.woshipm.com/rp/824499.html 学习网站:http://www.woshipm.com 如有侵权,请联系立即删除如何实现上下滚动效果：让内容在显示区域滚动； 内容面板没有接触到顶部时，让内容面板移动至顶部； 内容面板接触到顶部，没有接触到底部时，把内容面板的底部定位到底部元件位置。1、所需元件首先，我们需要准备以下元件：2个矩形（300*30
AXURE-039-组件-下滑菜单
兵哥的专栏
09-25 353
​有一段时间没出来写东西了，最近总算有点时间，赶紧接着写，也算是一个习惯的延续吧。 马上双节，在这里祝大家双节愉快。 本期将自己项目中用到的一个下滑菜单效果分享出来供大家参考。实现起来比较容易。 显示效果 具体静态图和动态效果如下： 动画效果 (原始gif略大，加载不出来估计，压缩了一下，感觉有点失真，大家下载源文件预览会好点)。 实现方式 1、主要用到动态面板来管理子菜单。并分别给一级菜单配置鼠标点击，移入时动态面板切换和上下滑动操作，从而时间菜单切换显示和隐藏效果。 ...
axure拖动页面_如何利用axure实现移动端页面拖动展示效果
weixin_39789979的博客
12-20 3066
当一位有PC端原型设计经验的产品人员，设计移动端产品原型时，遇到的第一个问题可能就是页面拖动的效果了。我们在设计PC端产品时，利用鼠标滚轮进行整个页面的展示，然后到了移动端，利用手指进行拖动，滑动展示整个页面。两种交互方式截然不同。axure制作移动端产品原型时，会遇到很多难题，建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具。当然，axure是完全可以实现移动端交互的，只是我...
axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果
weixin_31201555的博客
01-31 4273
昆仑女神的故事，sem优化，破产管理人在移动端页面上，用手上下滑时，超过一定向上滑动时，菜单栏能有吸顶效果，如何用axure实现呢？作者在最近在手机移动端的时候，有一个动画，希望达到效果：用手上下滑页面时，超过一定向上滑动时，菜单栏能有吸顶效果，这个效果相信不用我多说，都应该懂，但是如何用axure实现呢？因为不会，先看了网上的教程，但是网上的教程都是以网页滚动，坦白说都是pc端的交互效果。当然如...
Axure基础详解十四：吸附菜单效果
太空背包客的博客
11-06 370
吸附菜单效果
axure9怎么让页面上下滑动_【Axure9百例】4.简单交互
weixin_39755003的博客
11-22 1267
原型上一些简单的移动动画交互效果，我们其实都用不上使用移动的动作，只需要设置显示时的动画效果即可，例如下面这种效果：不太熟悉的同学可能想到的是移动标题和描述信息来实现，当然也没有问题，只是复杂了点。有两种方式可实现这样的效果。方式一(推荐)1)界面上放好标题和描述，初始状态设置为隐藏2)添加鼠标移入事件，显示标题和描述信息，标题显示的方式为从右向左滑动，描述的显示方式为从下向上滑动3)添...
LAYUI 折叠面板
ShiGtai的博客
10-27 1978
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作 layui.use(‘element’, function () { var element = layui.element; //折叠面板监听 element.on(‘collapse(filter)’, function(data){ // console.log(data.show); //得到当前面板的展开状态，true或者false // console.log(data.title); //得到当前点击面板的标题区域DOM对
Axure RP 7 左右滑动和左右范围限制问题效果
09-25
Axure RP 7 实现了利用滑竿左右在一定的范围内滑动取值效果。
Axure模拟手机屏幕滑动
07-15 279
Axure8.0，模拟红米Redmi Note3，MIUI 8.6.7.7开发版三个界面的滑动 1. 手机截屏，放到Axure的Page1当中，单张图片比例调整为360x640，分别命名P1、P2、P3，横着排列，将三张图片组合（命名为home_img）。 2. 在index页面创建一个动态面板（home_panel），设定宽高为360x640，在动态面板下方创建一个热区（edge）...
Axure原型设计：实现菜单下拉效果
ofay
09-24 669
尽管Axure的基础元件库里面已经有菜单项了，但是样式和交互我们不一定喜欢，所以这里自己制作菜单项以满足不同的需求。
Axure教程：如何1分钟搞定APP上下滑动（垂直滑动）？
weixin_45291739的博客
09-27 5278
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Axure教程——滑屏效果
weixin_43516258的博客
06-27 1917
本文介绍用Axure来做一个移动端引导页的滑屏效果。
【Axure学习】（四）登陆按钮的下滑效果
always_littlesun的专栏
08-27 876
当点击登陆时，弹出下面的登陆界面。点击下面的登陆按钮时，上行回去。实现方案： 1. 黑色矩形：登陆panel，白色label（也可以直接用黑色矩形自带的字体，但这样就是给矩形加事件，焦点变成了黑色panel）； 2. 下面的面板，将其设置为动态面板，在动态面板的state1里面添加登陆矩形。否则下面的绿色panel不属于动态面板，会和动态面板各自执行下滑事件，不是想要的效果。 3. 给上面的登
移动端上拉加载demo
小白搬代码的博客
11-22 2102
//引用 <script src="/js/4.2.5iscroll.js"></script> //html <div class="wrap" id="#wrapper"> <div class="main_list"> <div class="other_list"> //循环开始 <ul>....</ul>
Axure RP使用攻略--动态面板滑动效果（10）
qq_61412264的博客
09-07 1811
示例原型：http://pan.baidu.com/s/1mgjYahi 实现目标： 1、  点击登录滑出登录面板 2、  点击确定滑出动态面板 最终效果如下： 这种效果可以通过两种方法实现： 首先准备需要的元件：1个矩形，1个文本，1个动态面板（里面包含2个矩形，一个作为面板，一个作为登录按钮） 把动态面板添加一个状态，准备工作就结束了。 注意：每个主要元件记得加上标签啊！   第一种：动态面板滑入滑出方式 1、  设置文本面板“登录”的onclick事件，为点.
Axure rp8移动端设计元件库大全
最后，这份全库资源对于初学者来说，是一个很好的学习工具，可以让他们在实践中快速了解Axure RP8的功能和APP/WEB设计的最佳实践。对于经验丰富的设计师而言，这些资源库可以极大地提高工作效率，让他们有更多时间去...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值