发布时间：2020-6-2 分类： 电商动态
在实际的制作过程中，我们发现Axure的动态面板原件可以提供强大的功能，例如滚动条，但滚动条只能以原生效果显示，并且无法编辑它们的显示样式。 Axure滚动条的丑陋是一个结构性问题。我们无法解决这个问题，但可以绕过它。其他人看到的Axure原型滚动条是我们希望对方看到的滚动条。
首先，准备材料
这里我们使用微信界面来显示，准备材料（这里我主要使用动态面板和中继器，嗯，充当动态面板中的转发器），把微信接口放在一起，为你准备你想要的滚动条样式是免费的，因为我们将在加载时控制特定长度。
接下来，显示动态面板的滚动条，“右键单击” - >“滚动条” - >“自动显示垂直滚动条”
增加动态面板的宽度（原始宽度+18），然后覆盖整个滚动条，宽度为17个控件，并调整颜色以恢复第一个图像的效果
此时，您将发现已获得带有隐藏滚动条的动态面板
第二，准备互动
从这一步开始是一项相对重要的工作。在这里，我们需要知道如何进行交互，以便其他人可以看到我们想要为他们看到的内容。滚动条的目的可能有点左右，但简单来说，它是特定的。实施的逻辑。
假设你可能不相信它，它比将大象放入冰箱更容易，因为它只需逻辑上两步：
在页面加载时将滚动条调整到刻度。
页面滚动时相应滚动条的位置
这很简单吗？
正式开始准备互动：
第一个公式–滚动条的高度
“滚动条的高度 =“动态面板高度“*”动态面板高度“/”动态面板中内容的高度
每个人都知道滚动条按照一定的比例显示。当页面滚动时，这种比例控制可以使滚动条滚动到顶部和底部，并且滚动条（花）诚实地停留在界面中而不会外出。墙，这里的墙是“动态面板”，动态面板中内容的高度是转发器的高度。
如上图所示，“滚动条高度”=wall.height * wall.height/content.height
第二个公式–滚动条的移动
“滚动条的动态位置”=“滚动条的初始位置> +“动态面板滚动的y值" *“动态面板高度< ldquo;内容的高度动态面板“/P>
这里使用的词是“滚动条的动态位置”而不是“滚动条的位移”，因为滚动条实际上在每次滚动操作之后移动到相应的位置，而不是实时地移动一个像素。一个像素跟随运动。有“初始位置”，因为你想使用“绝对位移”，为什么要使用“绝对位移”？好奇的朋友可以尝试相对位移，这将在后面提到。
“动态面板滚动y值” *“动态面板高度” /“动态面板中内容的高度”这部分不难理解，因为“墙”的高度有限，滚动的内容距离只能与滚动条的移动距离成正比。
三，互动制作
命名控件
注意：在进行交互时必须命名控件或组！
该控件的命名如下：
初始化滚动条
检查滚动条以添加加载事件
设置当前（滚动条）组件的大小
添加相应的局部变量（动态面板和转发器），根据公式1
编辑当前组件的大小移动滚动条
检查动态面板并添加“滚动时事件
”在动态面板滚动时将滚动条移动到相应的位置。这是“绝对位移”，并确保添加动画以满足您的需求
X的位置是相同的，但因为它是绝对位移，这里的值是填充滚动条的x坐标。添加相应的局部变量后，编辑y公式。
“最初的y值”更好地理解加载时滚动条的纵坐标;
动态面板滚动的y值可以理解如下。动态面板是静止的，并且在向上和向下移动内容之后内容始终与动态面板的顶部相距一定距离。该值始终为正值。 “相对位移”处理原因。
显示，隐藏
微信滚动条的效果简化为“移动时显示，移动结束后隐藏”，但动态面板没有滚动结束选项。在这里，您可以设置等待事件以等待滚动条到位，然后隐藏它。影响。
第四，最后一次
这里作者使用的材料相对简单，你可以将效果添加到滚动条，什么光圈和滤镜可以。
拖动效果上的滚动条实际上可以完成。微信的效果也不错，但不可能如此顺利地模拟它。您可以自己研究拖动，拖动效果具有拖动结束事件。非常好用。
