V1.0.0
Skip to content

WScrollbar 滚动条组件 ​

滚动条组件,基于 WinDesignNext Scrollbar 封装,为固定高度区域提供自定义滚动条,常用于长列表、消息流等场景。

基础用法 ​

API ​

属性类型默认值说明
componentstringWScrollbar组件类型(必填)
heightstring | number | DataBindingValue—滚动区域高度
maxHeightstring | number | DataBindingValue—最大高度
nativebooleanfalse使用原生滚动条
alwaysbooleanfalse滚动条始终显示
noresizebooleanfalse禁用 resize 监听
minSizenumber20滚动条最小尺寸
distancenumber0触发 end-reached 的距离阈值
tagstringdiv视图容器标签
wrapClassstring—外层包裹类名
viewClassstring—视图区域类名
scrollbarSizenumber6垂直滚动条宽度
hScrollbarSizenumber6水平滚动条高度
actionobject—滚动事件配置
childrenstring[]—可滚动内容子组件 ID

事件 ​

事件type说明
滚动scroll滚动时触发
到达边缘end-reached滚动到顶部/底部/左/右边缘时触发
json
{
  "action": {
    "event": {
      "name": "onScrollEnd",
      "type": "end-reached"
    }
  }
}

path 支持说明 ​

属性path 支持说明
height✅动态设置滚动区域高度
maxHeight✅动态设置最大高度

动态高度 ​

json
{
  "component": "WScrollbar",
  "maxHeight": { "path": "/panelMaxHeight" },
  "children": ["content_list"]
}

使用场景 ​

场景推荐配置
固定高度列表maxHeight: 200 + children 引用 WList
消息流always: true + end-reached 加载更多
弹窗内滚动height path 绑定 + native: false

注意事项 ​

  • 必须设置 height 或 maxHeight 之一,否则内容不会滚动
  • wrapStyle / viewStyle 等对象型样式暂不支持 path,请使用静态配置
  • 子组件通过 children 引用,与 WCard、WRow 等容器组件用法一致