教程 > 交互 > 滚动区

滚动区

滚动效果无论是在手机原型,还是网页原型中,都是非常常用的。在App原型设计中,还需要将顶部及底部导航栏固定。

今天教大家两种实现滚动效果的方法,请根据需要选取:

1. 用面板组件制作(自带滚动),适合灵活使用。

2. 用内容面板+辅助画板制作。适合大范围滚动,查看滚动内容更直观、更方便编辑和管理。

下面来看看具体的步骤吧!

方法一

将需要滚动的内容放在面板中,当内容整体宽度或高度大于面板的宽度或高度,即可生成滚动效果。效果呈现如下:

  • 滚动区支持横向滚动和纵向滚动。当内容高度超过面板高度,即可纵向滚动;当内容宽度超过面板宽度,即可横向滚动。
  • 演示时,可拖动面板滚动条进行滚动。也可使用鼠标滚轮进行纵向滚动,Shift+鼠标滚轮进行横向滚动。
  • 面板属性中可设置“支持滚动”、“显示滚动条”。

具体可参考下方视频中的操作步骤:

方法二

使用内容面板+辅助画板制作滚动区,效果呈现如下:

那么上面的效果是如何制作的呢?请参考下方视频中的操作步骤: