ScrollView

继承自 View

滚动内容的容器,滚动的前提是正确调用updateViewPort

标签属性

属性类型是否必填说明
scrollXstring是否需要横向滚动,支持 "true"和"false",默认值为 "false"
scrollYstring是否需要纵向滚动,支持 "true"和"false", 默认值为"false"

温馨提示

为了兼容历史版本,默认做了一个逻辑,如果当前纵向内容大于 ScrollView 本身高度会自动开启纵向滚动特性,如果需要关闭,可以强行在标签指定 scrollY = "false"

<scrollview scrollY="true"></scrollview>

属性

属性类型说明
scrollXboolean动态修改 ScrollView 是否可以横向滚动
scrollYboolean动态修改 ScrollView 是否可以纵向滚动
vertivalScrollbarScrollBar纵向滚动条实例
horizontalScrollbarScrollBar横向滚动条实例

当滚动开启时候,会自动插入滚动条组件,反之关闭的时候会删除滚动条组件。

兼容性

滚动条特性 v1.0.4版本开始支持

示例

const list = Layout.getElementById('list');
// 将滚动列表动态设置为禁止纵向滚动
list.scrollY = false;

// 在 init 之后内部有些异步逻辑取不到 vertivalScrollbar,需要延迟一帧执行
Layout.ticker.next(() => {
  // 隐藏滚动条
  list.vertivalScrollbar.hide();

  // 改变滚动条的宽度
  list.vertivalScrollbar.width = 20;

  // 改变滚动条的背景颜色
  list.vertivalScrollbar.style.backgroundColor = 'red';
});

方法

scrollTo

scrollTo(left: number = 0, top: number = 0, animate: number = true)

滚动到指定位置,如果当前需要纵向滚动到指定位置且不支持横向滚动,left 传0即可,横向滚动同理。

const list = Layout.getElementById("list");

// 列表往上滚动 100
list.scrollTo(0, 100, true);

示例