WScrollbar 滚动条组件
滚动条组件,基于 WinDesignNext Scrollbar 封装,为固定高度区域提供自定义滚动条,常用于长列表、消息流等场景。
基础用法
API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
component | string | WScrollbar | 组件类型(必填) |
height | string | number | DataBindingValue | — | 滚动区域高度 |
maxHeight | string | number | DataBindingValue | — | 最大高度 |
native | boolean | false | 使用原生滚动条 |
always | boolean | false | 滚动条始终显示 |
noresize | boolean | false | 禁用 resize 监听 |
minSize | number | 20 | 滚动条最小尺寸 |
distance | number | 0 | 触发 end-reached 的距离阈值 |
tag | string | div | 视图容器标签 |
wrapClass | string | — | 外层包裹类名 |
viewClass | string | — | 视图区域类名 |
scrollbarSize | number | 6 | 垂直滚动条宽度 |
hScrollbarSize | number | 6 | 水平滚动条高度 |
action | object | — | 滚动事件配置 |
children | string[] | — | 可滚动内容子组件 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 等容器组件用法一致