Axure两种滑动效果

     通过对动态面板、函数、中继器、学习和交流对产品的一些看法。而我个人的观点是动态面板对应产品的交互设计、产品架构；函数对应产品的业务逻辑，判定等；中继器对应数据结构，数据类型等。下面跟我一起通过学习两种种Axure实现两种滑动的方式一边看一边加深对产品的理解吧。

　　主要是通过动态面板来设置两种滑动方式。

　　第一种：PC客户端，利用滚动条的方式，滑动鼠标滑轮就可以实现（注意观察图中的光标位置没有变化）。

　　第二种：移动端，准确来说应该叫拖动鼠标。通过按住鼠标左键，上下拖动，光标会一直在移动。

     上面就是两种滑动方式的最终效果，现在跟我一步一步学习，这个知识有可能在日常生活中也会用到，随时可以活学活用。

　　一、PC滑动效果的实现：

　　首先，我们需要一个很长的中继器大概是320*868规格，同样也可以用一张很长很长的拼图来代替，等同的一个道理。例如：用iphone5的页面尺寸（320*568），超过了页面尺寸，所以我们要来做一个滑动效果。然后我们在中继器的旁边，拖入一个动态面板规格在320*568。接下来，我们来设置一下动态面板的属性，滚动条——自动显示垂直滚动条为初始值面板就变成了下面这样：因为滚动条占据了一定的宽度，我们就把面板拉得宽一点点（具体根据需求来调整）然后将中继器放入动态面板（中继器坐标为0,0）中,如下图：中继器进入了动态面板

　　然后我们按F5看看效果，试着将鼠标指针移入页面内，尝试上下滑动鼠标滑轮：这样就实现了滚动，有没发觉有一个滑轮有点不太理想？没关系，现在我们进行最后一步：在这个装有中继器的面板旁边，再添加一个面板320*568规格，这个面板目的作用就是遮住滚动条。最后再将右边装有中继器的面板放到左边的面板内，再点击键盘上F5按钮。是否发觉没有了滚动条？第一种滑动就学到这里。接下来还有一种种比较简单，也能模拟出常规的滑动效果，而且可以在手机端演示和使用。还有一种滑动，大家跟着我往下看。

　　第二种：手机端，拖动滑动效果：

　　我们在中继器320.868规格的旁边，拖入一个大小相同的动态面板，设置为左侧面板，右侧中继器，且大小相等面板尺寸也为320*868。然后将面板命名为：content，再将中继器拖入面板中，如下图：（动态面板的状态一修改为repeat）

　　然后在装有中级器的动态面板旁，拖入一个动态面板，尺寸为显示界面的大小（320*568），命名为view。如下：

　　再将装有中继器的面板放入到view320*568规格中并套入面板然后需要我们来添加边界，移动的垂直拖动，勾选配置动作的动态面板，垂直拖动然后确定。

　　解释：在拖动view（320*568）的过程中其实是拖动content（320*868），所以我们要为content面板移动的距离添加边界。上边界下滑不能离开顶部，所以我们设置边界（顶部小于等于0），即上边界只能往上滑；下边界上滑的界限是content面板和view面板的底部在同一y轴，则其顶部的最高位置为（868-568），因为在负轴所以是-300。

　　总结：两种滑动效果都是基于规格中进行，相比较第一种较给为第二种容易，PC客户端和移动端各有优劣，通过以上滑动效果你们有没有学到从中的技巧呢，没有的可以自己跟着步骤尝试一下，希望能帮助得到你，如果想学习更多Axure技巧也可以来向我咨或询关注课课家在线教育。