Mockplus实操教程：长页或长图滚动效果

1、打开Mockplus后，首先选择“新建项目”，然后选择项目类型为“手机”（具体的设计尺寸根据自己的需求选定），接着点击“创建”即可。

2、滑到手机壳底部，长按鼠标左键向下拉长页面。拉长的页面在手机壳右侧顶部及底部会出现尖角按钮图标。

3、组件库中搜索组件在拉长页面中做原型设计。

4、设置固定区域：拖动顶部及底部的尖角按钮可设置固定区域。

1、按上面操作方法创建一个手机项目。

2、组件库中搜索组件在需固定的顶部和底部区域进行设计。

3、在中间需要滚动的区域添加滚动区。

4、双击滚动区，点击滚动条的“+”号可增加滚动区域，然后在滚动区域进行原型设计。

1、效果说明：当我们在淘宝网上看中一件商品，点击后会进入商品页面。当我们滚动页面一段距离后，页面中的“宝贝详情”、“累计评论”及“专享服务”这个选项卡会停留在页面最顶端。实现方法：两个滚动区的嵌套使用

2、添加一个滚动区（滚动区1），并在滚动区里添加“宝贝详情”、“累计评论”、“专享服务”选项卡及其上面的组件。

3、回到滚动区1，点击滚动区1中滚动条“+”号，将高度增加到“宝贝详情”、“累计评论”、“专享服务”选项卡正好在顶部时。

4、将滚动区2的高度调至一定高度（网页项目）；或是将滚动区2的高度调至手机满屏高度（移动项目）。

5、退出滚动区编辑状态进入演示界面，就可以看到该效果了，演示时注意鼠标位置，滚动“宝贝详情”、“累计评论”、“专享服务”选项卡上面时，鼠标放在上面区域，滚动下面时，鼠标放在下面区域。