Axure8。0教程：模拟手机端纵向滑动的效果

　　axure8。0出了这么久了，在不久前出了正式版，正式版相对于测试版，相对稳定了好多。然而8。0相对于7。0在功能上又丰富了好多，主要增加了对设计这一块的功能，对于一些要求不是很高的设计，在8。0上就可以完成。
　　今天就以8。0，写了一篇关于模拟手机端纵向滑动的效果。
　　当我们的手机的内容超过屏幕尺寸的时候，就需要滑动浏览之前未出现的内容。
　　此份教程也可以模拟出上拉刷新和下拉刷新事件。
　　先看预览效果吧：http：emhmmb。axshare。comc2
　　OK，话不多说，接下来进入正题。
　　因为是教程，所以很多对于设计和排版上就没过多的装饰了，这里主要有三个部分：一个是状态栏、内容、底栏。这次要操作的部件就是“内容”面板。内容面板一共有两个面板组成，最外层的面板的作用是固定尺寸，固定拖动的范围。第二个面板作用是固定内容，添加事件，完成交互效果。如下图
　　这里要添加事件的是“内容”面板，也就是里层的面板，这里涉及到两个事件：“ondrag”拖动事件和“ondragdrop”拖动停下事件。
　　“ondrag”，该事件的作用是，让我们的面板能够被拖动，并限制拖动的方向和范围。这里设置的是y轴方向拖动。
　　接下来是比较重要的，如果只有上面的事件，当我们预览的时候会发现，我们拖动中间的内容面板，面板会超过屏幕尺寸，在距底栏和状态栏会有一片空白。这时就需要第二个事件“ondragdrop”，拖动落下时。增加这个条件，就可以防止上面的情况发生。
　　在添加下面事件之前，我们需要确定两个位置，一个是“内容”面板的起始位置，也就是离开状态栏时的位置，这里是（0，5）第二个位置是，内容面板离开底栏时的位置，这里的坐标是（0，435）。
　　双击“ondragdrop”，添加条件，如下图：
　　这里解释一下这个条件，这里一共两个值和一个条件，一个值是this。y，这里的this就是当前所操作的部件，这里是“内容”面板，第二个值是5，5是“内容”面板起始所在位置。整句条件表达式的意思是，当我们拖动时，如果“内容”面板的y坐标大于或等于5，就让“内容”面板回到该位置。
　　同理：当向上拖动面板时，如果“内容”面板离开了底栏，也就是y坐标小于了435，就让面板回到该位置。
　　到此，整个教程就完成了，可以预览一下效果了。
　　做这种效果，其实方法还是有很多的，接下来可以再介绍一个方法，在文章之前提到了状态栏和底栏，我们可以根据它们的所在位置，设置如下条件。
　　方法很多，就看大家对事件的理解程度和对软件的熟悉程度了。
　　这里就不放原型原件了，毕竟交互比较简单，看教程也应该能做出来，而且放了原件，如果某些童鞋实在做不出来，直接看的原件，就没有了求学的欲望，这样还是不可行的。所以希望大家多多摸索摸索，熟悉熟悉部件和事件。axure是个比较强大的工具，好好利用。