scroll
更新时间：
滚动视图容器。竖向或水平方向滚动容器，竖向滚动需要设置定高，水平滚动需要设置定宽。
子组件
支持，也支持嵌套 scroll。
属性
支持通用属性
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| scroll-x | Boolean | false | 否 | 是否允许横向滚动 |
| scroll-y | Boolean | false | 否 | 是否允许纵向滚动 |
| scroll-top | Number/String | 否 | 设置竖向滚动条位置，内容顶部到 scroll 顶部的距离，如果有滚动吸附效果则先执行scroll-top再吸附。 |
|
| scroll-bottom | Number/String | 否 | 设置竖向滚动条位置，内容底部到 scroll 底部的距离，如果有滚动吸附效果则先执行scroll-bottom再吸附。同时设置scroll-top和scroll-bottom 以scroll-top为准 |
|
| scroll-left | Number/String | 否 | 设置横向滚动条位置，内容左侧到 scroll 左侧的距离，如果有滚动吸附效果则先执行scroll-left再吸附。 |
|
| scroll-right | Number/String | 否 | 设置横向滚动条位置，内容右侧到 scroll 右侧的距离，如果有滚动吸附效果则先执行scroll-right再吸附。同时设置scroll-left和scroll-right 以scroll-left为准 |
|
| bounces | Boolean | false | 否 | 是否边界回弹 |
样式
支持通用样式
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| scroll-snap-type | - | 作用在 scroll 组件上，表示 scroll 的滚动吸附类型。第一个参数为 x 或 y ，表示水平方向上滚动或竖直方向上滚动；第二个参数为 mandatory 或proximity。mandatory 表示选择距离最近的锚点吸附，proximity 距离吸附锚点不到容器高度的 30% 时才会吸附。默认为 proximity； |
|
| scroll-snap-align | none | start | center | end | none | 作用在 scroll 子组件上，表示子组件和 scroll 的对齐形式；start：表示组件和 scroll 顶部对齐。center: 表示组件和 scroll 底部对齐。end：表示组件和 scroll 中心对齐。none：无需对齐，默认值。 |
| scroll-snap-stop | - | normal | 作用在 scroll 组件上，是否允许滚动容器“越过”可能的捕捉位置；normal可以越过捕捉位置，always 不能越过捕捉位置 |
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| scrolltop | 滚动到顶部触发 | |
| scrollbottom | 滚动到底部触发 | |
| scroll | { scrollX，scrollY } | 滚动触发scrollX 表示滚动的水平距离；scrollY 表示滚动的垂直距离； |
方法
| 名称 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| getScrollRect | 无 | Object | 获取滚动内容的尺寸 |
异步返回值
| 属性 | 类型 | 描述 |
|---|---|---|
| width | Number | 滚动内容的宽度，包含border和padding |
| height | Number | 滚动内容的高度，包含border和padding |
例子
this.$element('scroll').getScrollRect({
success({ width, height }) {
console.log('宽度', width)
console.log('高度', height)
},
})复制代码