墨刀实现局部滚动条

时间:2024-04-02 12:31:53

1、场景1:   制作pc端产品时,实现局部滚动条效果,以数据列表为例

      方法1:使用“动态组件”,编辑组件状态,将列表的内容填充超过未编辑时组件的大小

1)未编辑前,“动态组件”状态:

墨刀实现局部滚动条  

2)点击“动态组件”编辑时,内部状态:注意编辑状态时,需要把内部状态的虚线拉到想展示数据的边界,即虚线要框上所有要展示的数据

墨刀实现局部滚动条

注意⚠️:编辑组件状态时,一般会默认两个组件状态,当我们不需要其他组件状态时,仍然不能删除该组件的第二个状态,否则交互无效,如下图所示:(状态2我这里是复制了状态1,实际上只要不删除即可)

墨刀实现局部滚动条

3)完成数据填充,退出编辑后,动态组件状态如下,点击运行按钮 墨刀实现局部滚动条  后即实现局部滚动条效果(左右滚动)

墨刀实现局部滚动条

方法2:使用母版,将需要展示的内容转换成母版,编辑母版时,调整外框使得要展示的内容均在外框内即可,如下图所示:

墨刀实现局部滚动条

 

墨刀实现局部滚动条

 

墨刀实现局部滚动条


2、场景2: 制作手机APP端产品时,当页面内容超过了当前屏幕的默认高度,需要在预览模式下通过滚屏来查看超出屏幕部分的内容了,即实现局部滚动条

      方法:拖动调节屏幕高度——选中页面,将蓝线拖拉到包含所有要展示的内容高度,点击“运行”按钮,即可上下滚动查看所有内容,如下图所示:

墨刀实现局部滚动条

补充:滚动条在屏幕固定区域滚动,可以通过页面画布左侧的固定滑块实现,固定后运行时“顶栏”和“底栏”将不随长页面滚动而滚动,如下所示:

墨刀实现局部滚动条