Axure实现移动端左右滑手势滑动效果操作实例

在移动端的效果展示中，左右滑的手势我们经常会体验到。然而，如何以最快的速度设计出这个效果呢？本文作者就通过两个步骤，简洁的为我们做了介绍，快来学习吧。

一、第一步

1. 建立元件

如上图：放一个手机模型，中间看好哪里需要做左右手势效果。在这个模块位置，建立三个小模块，这三个小模块就是需要滑动的部分。

2. 转换为动态面板

这里是一个小重点，大家注意了。

先将三个小模块转换为动态面板（我们取名叫面板大A），将动态面板宽度缩小到手机内部，如图：

3. 动态面板A自动会有一个state1

点击进去，再将三个小模块转换为动态面板（我们叫面板小a）：

要点说明：为何要两次转换动态面板呢？

因为面板大A需要配合最外部的手机模型，固定宽度，内容不能超出。而面板小a是为了后续方便加拖动事件。

二、第二步

弄好元件以后，要开始加事件了，我们先想想最后需要什么效果：

• 三个小模块可以左右滑动，滑动过程内容要跟着一起动；
• 左右滑需要边界，最左侧不能模块最左侧的位置，最右侧也不能低于模块最右侧的位置。

1. 选中小a动态面板，给整个面板添加一个拖动事件

一定是水平拖动，并未一定要添加边界。建议从左侧边界计算比较方便，看左侧最大能到哪里，最小能到哪里即可。

计算方法：三个小模块宽度-大A面板的宽度。

以上就是Axure制作数独操作实例的全部内容介绍了，关于更多Axure教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。Axure实现移动端左右滑手势滑动效果操作实例