ScrollBar

兼容性

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

滚动条组件,服务于 ScrollView,不能独立使用。

当 ScrollView 开启横向滚动或者纵向滚动的时候,会自动给 ScrollView 插入相应的 ScrollBar,ScrollBar继承自 View 组件。

属性

属性类型说明
widthNumber滚动条的粗细,因为要兼容横竖滚动,所以 style.width 在不同模式下代表的意思不一样,因此通过单独的 width 属性来代表滚动条的粗细
autoHideboolean是否自动隐藏滚动条,默认为 true,在滚动结束后会自动隐藏
autoHideTimenumber与 autoHide 配套属性,开启了自动隐藏,在一定时间内隐藏滚动条,默认是1000,单位 ms

示例

const list = Layout.getElementById('scrolllist');

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

  list.vertivalScrollbar.autoHide = false;
});

方法

hide

隐藏滚动条

const list = Layout.getElementById('scrolllist');

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

show

展示滚动条

const list = Layout.getElementById('scrolllist');

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

样式

ScrollBar 本身只是个普通的 View 组件,只不过默认带了一些样式,下面介绍 ScrollBar 默认的样式。

属性类型描述
backgroundColorstring默认值'rgba(162, 162, 162, 1)',建议采用 rgba 的格式设置颜色
positionstring'absolute',不建议修改
opacitynumber透明度,开启了autoHide会动态修改透明度,不建议修改
borderRadiusnumber值为 width / 2,不建议修改
widthnumber滚动宽度,自动计算,不建议修改
heightnumber滚动条高度,自动计算,不建议修改
leftnumber滚动条定位,自动计算,不建议修改
topnumber滚动条定位,自动计算,不建议修改

示例

const list = Layout.getElementById('scrolllist');
// 在 init 之后内部有些异步逻辑取不到 vertivalScrollbar,需要延迟一帧执行
Layout.ticker.next(() => {
  list.vertivalScrollbar.style.backgroundColor = 'red';
});