Axure实例：制作一个通用的移动端内容滚动区

Axure实例：制作一个通用的移动端内容滚动区

做一个简单的手机内容滚动区，2个动态面板就行了！

1、原材料的提前准备

(1)滚动区:从组件包中的基本组件中拖动一个动态面板到原型控制面板中，命名为“rolling_area”，这是滚动区的意思，表示网页内容的滚动类别。设置宽度=360，高度=600。

(2)内容区:双击鼠标“rolling_area”动态面板进入“State1”。再次拖动一个动态面板到原型控制面板中，命名为“content_area”，这是内容区域的意思。设置width=360，height=800，表示要访问的内容高度为800。

(3)实际内容:双击“content_area”动态面板，进入“State1”写入内容。这里，我将使用一个高度为800并填充了不同图形的矩形框来显示实际内容。这个矩形框的绘制和“content_area”的高度设置为800，都是为了后面浏览时更好的看到滚动的实际效果。

2、设置互动

(1)首先要完成垂直拖动显示屏访问内容的实际效果。点击“content_area”动态面板，在右侧的交互设置中选择“拖动时”，然后选择“content_area”并设置为“垂直移动”。如下图所示设置后，点击“确定”。

现在，我们可以按F5浏览。这时你可以感觉到，当电脑鼠标在滚动区拖动图形矩形框时，内容会议上下垂直移动。但是有一个问题，就是内容会无休止的上下移动，而不是像人们平时用手机访问网页那样，当你把网页拖到顶部或底部而没有任何内容时会被d回。这时候大家必须按照 *** 纵“content_area”Y值的范畴来 *** 纵实际内容移动的区域。

(1)点击“content_area”，选择“拖动完成时”，编写测试用例1。如下所示设置标准。效果是当“content_area”的y值超过0时可以被d回。

(2)选择“拖动完成时”，添加测试用例2，设置标准:当This(今天的组件，也指“content_area”动态面板)的Y值低于某个值时，“content_area”会移动到这个值的位置。这个测试用例的实际效果是，当显示屏底部没有内容时，没有办法再向下拖动。那么这个值多少钱呢？这个值是“内容_区域”的底部和“滚动_区域”的底部重合时“内容_区域”的y值。你稍微想一下，这个值就是“滚动_面积”的高度减去“内容_面积”的高度。公式显示是“滚动_面积。高度-内容_面积。height”，但由于我们现在处于“rolling_area”的“State1”情况下，不能立即实际 *** 作组件“rolling_area”，只能按照插入局部变量的方式实际 *** 作“rolling_area”。因此，如下所示，插入局部变量LVAR1(

然后再来说说设置当“content_area”的y值<某个值(LVAR1.height-This.height)时，将“content_area”移动到这个“某个值”(LVAR1.height-This.height)。

此时，你可以按F5浏览，用电脑鼠标拖动图形矩形框，就可以感受到平时在手机上访问网页的实际效果了！

这是一个通用的rolling_area，我们可以通过改变scrolling_area的高度或总宽度来 *** 纵网页内容的滚动类别。

文/@莉迪亚

注:阅读相关网站基本建设方法的文章，请移至网站建设教程频道栏目。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/767454.html