Meri Plus基础用法
通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。
最大高度
横向滚动
当元素宽度大于滚动条宽度时，会显示横向滚动条。
滚动条总是显示
当元素宽度大于滚动条宽度时，会显示横向滚动条。
手动滚动
通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。
使用原生滚动条样式
Attributes
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| height | string | number | 100% | 容器高度 |
| max-height | string | number | — | 容器最大高度 |
| native | boolean | false | 是否使用原生滚动条样式 |
| box-style | string | — | 包裹容器的自定义样式 |
| box-class | string | — | 包裹容器的自定义类名 |
| content-style | string | — | 内容区域的自定义样式 |
| content-class | string | — | 内容区域的自定义类名 |
| noresize | Boolean | false | 不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能 |
| always | Boolean | false | 滚动条总是显示 |
| min-size | number | 20 | 滑块最小尺寸 |
| barBackgroundColor | string | transparent | 滚动条区域背景 |
| barYSize | string | 6px | 竖向滚动条大小 |
| barYHoverSize | string | 8px | 竖向滚动条悬浮大小 |
| barXSize | string | 12px | 横向滚动条大小 |
| barXHoverSize | string | 16px | 横向滚动条悬浮大小 |
| thumbColor | string | rgba(196, 201, 207, 0.8) | 滑块颜色 |
| thumbHoverColor | string | rgba(196, 201, 207, 1) | 滑块悬浮颜色 |
| container | Function | — | 自定义包裹容器 |
| content | Function | — | 自定义内容区域 |
Events
| 事件名 | 描述 | 返回值 |
|---|---|---|
| scroll | 当触发滚动事件时，返回滚动的距离 | ({ scrollLeft: number, scrollTop: number }) => void |
| scrollToBoundary | 当滚动到边界值时事件 | (boundary: 'left' | 'right' | 'top' | 'bottom') => void |
Slots
| 插槽名 | 描述 |
|---|---|
| default | 自定义默认内容 |
Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| handleScroll | 触发滚动事件 | () => void |
| scrollTo | 滚动到一组特定坐标 | (arg1: ScrollToOptions | number, arg2?:number) => void |
| setScrollTop | 设置滚动条到顶部的距离 | (scrollTop: number | 'end') => void |
| setScrollLeft | 设置滚动条到左边的距离 | (scrollLeft: number | 'end') => void |
| update | 手动更新滚动条状态 | () => void |
| boxRef | 滚动条包裹的 ref 对象 | Ref<HTMLDivElement> |