Axure教程：拖动事件和滚动事件

本次将会一起说下 Axure 中拖动事件和滚动事件，大家可在下文中按大标题快速找到对应的教程，不明白有什么区别的同学可以大概完整浏览一下。0sZ胜于蓝|优秀个人博客

Axure 中的拖动事件0sZ胜于蓝|优秀个人博客

应用场景如：移动位置；滑动验证；拖动上传；拖动排序等。0sZ胜于蓝|优秀个人博客

操作方式： pc 端：鼠标左键按住移动 手机端：手指按住移动即可。0sZ胜于蓝|优秀个人博客

本次我们以一个简单的滑动滑块为例：0sZ胜于蓝|优秀个人博客

（1）首先在 Axure 中画出一个简单的滑块0sZ胜于蓝|优秀个人博客

（2）将原型滑块右键设置为动态面板（因为动态面板才可以设置拖动和滚动事件）0sZ胜于蓝|优秀个人博客

（3）给动态面板设置拖动事件，拖动时让滑块动态面板水平移动0sZ胜于蓝|优秀个人博客

（4）完成，进行预览0sZ胜于蓝|优秀个人博客

我们预览时会发现滑块会超出矩形线段的范围，这并不是我们想要的效果。0sZ胜于蓝|优秀个人博客

（5）设置拖动的边界（演示中左侧大于 40px，右侧小于 610px）0sZ胜于蓝|优秀个人博客

（6）操作完成，我们预览来看一下效果吧0sZ胜于蓝|优秀个人博客

在线预览地址：https://lanhuapp.com/url/HgX0C0sZ胜于蓝|优秀个人博客

Axure 中的滚动事件0sZ胜于蓝|优秀个人博客

应用场景如：长页面的显示；线上滚动是出现置顶按钮；滚动切换Tab等0sZ胜于蓝|优秀个人博客

操作方式： pc 端：鼠标滚轮上下滚动 手机端：上下滑动即可0sZ胜于蓝|优秀个人博客

本次我们以 Chrome 的 Infinity 插件切换效果为例：0sZ胜于蓝|优秀个人博客

（1）首先在 Axure 中画出一个简单的线框图（又懒又强迫症，我就先截图了）0sZ胜于蓝|优秀个人博客

（2）调整第一页和第二页的位置后合并为分组，同时创建一个动态面板0sZ胜于蓝|优秀个人博客

（3）调整动态面板的大小，这是很重要的一步，如果你之前的尝试没有成功，那么很可能是这步的问题。滚动只有动态面板可以上下滚动时，也就是动态面板区域要比内容小。故我们将动态面板调整为比内容小 1px 的高度，和合适的宽度。（没有出现滚动条的可以在动态面板上右键选择显示滚动条）0sZ胜于蓝|优秀个人博客

（4）给动态面板设置滚动事件，分别设置向上和向下滚动时移动到我们想要的位置，为了不那么僵硬我们增加一个弹性动画，时间 500ms。0sZ胜于蓝|优秀个人博客

（5）现在我们想要的效果已经完成了，但是作为完美主义，我们最后吧滚动条隐藏一下吧0sZ胜于蓝|优秀个人博客

（6）我们期望的效果已经完美完成了，最后我们顺便把上面提到到拖动事件也加一下吧。分别设置向左拖动和向右拖动是移动到对应的位置，同时设置拖动时随着拖动一起移动（边界左右稍微增加一点距离，效果会更好哦）0sZ胜于蓝|优秀个人博客

预览地址：https://lanhuapp.com/url/ru69F0sZ胜于蓝|优秀个人博客

到这里本次的教程就结束了，大家如果有其他什么想要的实现的效果可以在下面留言，我们一起学习探讨哈。0sZ胜于蓝|优秀个人博客

本文由 @糊萝卜粥 原创发布于人人都是产品经理。未经许可，禁止转载0sZ胜于蓝|优秀个人博客

题图来自Unsplash，基于CC0协议0sZ胜于蓝|优秀个人博客

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/marketing/pm/749.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/marketing/pm/749.html

很赞哦！ ()