教程实现页面上下滑动和顶部吸附效果

　　本文将给大家介绍：如何在Axure中实现页面上下活动和顶部吸附，一起来看看吧
　　效果预览：看是不是你想要的：https：xydq37。axshare。comc2
　　一、元素准备
　　首先在画布中拖一个矩形框，宽度为375px，高度为675px，模拟手机屏幕大小；
　　然后在矩形框内添加一个动态面板，宽度：375px，高度597px，命名为首页外框。
　　在首页外框的state1里再添加一个动态面板，宽度：375px，高度1220px，命名为首页内容。
　　1。上下滑动效果
　　点击首页外框动态面板添加拖动时用例，拖动时：选择移动首页内容为垂直拖动，添加边界：顶部0；顶部首页外框动态面板高度首页内容动态面板高度。！0；顶部
　　在首页内容动态面板的state1中添加推荐卡片（为你推荐动态面板）、导航栏（由全部、附近、矩形框、滑竿组成）和信息流内容展示（content动态面板），如下图所示：
　　2。为你推荐卡片左右滑动效果
　　点击外层动态面板（为你推荐），添加拖动时用例：在用例编辑器中选择移动内容动态面板（为你推荐的内层动态面板命名为：内容）为水平拖动。
　　在移动的下拉菜单中选择水平拖动，并为其添加边界条件：左侧0；左侧〔LVAR1。WidthLVAR2。Width〕，点击右侧fx，进入编辑。首先添加局部变量LVAR1：元件选择为你推荐（外层动态面板），添加局部变量LVAR2：元件选择内容（内层动态面板），如下所示：！0；左侧
　　3。导航栏（用于顶部吸附）
　　导航栏由全部文本标签、附近文本标签、直线段（下称滑竿）、矩形框组成。
　　滑竿的动态效果有两种实现方式：
　　1）使用动态面板，单击菜单项进行动态面板切换，这里使用第二种方式。
　　2）不使用动态面板，使用移动事件，即鼠标单击菜单项时，移动滑竿（直线段）到指定位置，具体操作如下：
　　a）为全部添加鼠标单击时和鼠标选中时用例，如下所示。
　　鼠标单击时：选中当前元件，并设置选中时的字体颜色和粗体，取消选中附近。选中时：移动滑竿tox：〔〔This。x〕〕y：〔〔Target。y〕〕（选择绝对位置），这里的This代表全部文本标签，Target代表被移动的对象：滑竿；（滑竿x坐标和全部x坐标保持一致，滑竿y坐标保持不变）。添加动画：线性，时间100s（自行设定）。
　　b）为附近添加鼠标单击时和鼠标选中时用例，与上面的全部设置完全一样。
　　4。信息流展示动态面板：命名为content
　　为content动态面板添加两个状态：state1和state2，用于内容切换。
　　鼠标单击全部时，设置content为state1；鼠标单击附近时，设置content为state2。
　　5。导航栏顶部吸附效果实现
　　将导航栏复制一份，命名为menugroup（copy），将其放在首页外框动态面板的state1中，设置menugroup（copy）样式为隐藏，如下图所示：
　　为首页内容动态面板添加移动时用例，如下所示：
　　case1：如果首页内容动态面板向上移动的距离大于136（其中136为导航栏外围矩形框的y坐标），即当This。136时，就显示menugroup（copy）；
　　case2：否则，隐藏menugroup（copy）。
　　最后添加搜素框和手机顶部状态栏，以更加逼真。至此已经能实现页面在向上滑动过程中导航栏顶部吸附的效果了。
　　但细心的你会发现这里有一个问题：不论首页内容的导航栏选中的是全部还是附近，在页面向上滑动的过程中，出现顶部吸附效果时的导航栏始终选中全部，这是不对的。如何解决呢？看下面，2分钟搞定
　　再添加一个menugroup（copy）1，样式同样设为隐藏，与menugroup（copy）重叠放置。
　　只要在移动首页内容动态面板时，增加显示menugroup（copy）还是menugroup（copy）1的判断条件即可，按照下图进行设置即可，如下所示。
　　补充说明：menugroup（copy）中的全部，在引用页面时，勾选选中，附近不勾选，见下图。
　　而menugroup（copy）1中的附近，在引用页面时，勾选选中，全部不勾选。
　　好了，done
　　最终效果预览：https：xydq37。axshare。comc2
　　写的比较仓促，有些写的不清楚的地方欢迎批评指正。