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

 时间:2026-02-13 22:44:33

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • AxureRP如何实现功能提示框悬停功能?
  • 使用Axure如何实现左右滑动切换的效果?
  • 如何在新版手机易企秀中给H5中的文字添加动画
  • iH5中级教程:微场景H5必备,拆开盒子效果
  • AxureRP如何展开,收起,弹出,停靠功能面板
  • 热门搜索
    牛蒡的做法 双黄连口服液怎么样 黄体酮胶囊怎么吃 花椒鸡的正宗做法 钺怎么读 胡萝卜汁的做法 反思怎么写 契税怎么算 为什么什么乐 醉驾怎么处理