Evokerscroll-view
可滚动的视图区域。
Props
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| scroll-x | boolean | false | 否 | 允许横向滚动 |
| scroll-y | boolean | false | 否 | 允许纵向滚动 |
| upper-threshold | number | string | 50 | 否 | 距顶部/左边多远时，触发 scrolltoupper 事件 |
| lower-threshold | number | string | 50 | 否 | 距底部/右边多远时，触发 scrolltolower 事件 |
| scroll-left | number | string | 否 | 设置横向滚动位置 | |
| scroll-top | number | string | 否 | 设置纵向滚动位置 | |
| scroll-into-view | string | 否 | 值应为某子元素id，在可滚动方向滚动到该元素 | |
| scroll-with-animation | boolean | 否 | 在设置滚动位置时使用动画过渡 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| scrolltoupper | 滚动到顶部/左边时触发 | { direction: 'left' | 'top' } |
| scrolltolower | 滚动到底部/右边时触发 | { direction: 'right' | 'bottom' } |
| scroll | 滚动时触发 | { scrollLeft: number, scrollTop: number, scrollHeight: number, scrollWidth: number, deltaX: number, deltaY: number } |
Example
vue
<template>
<scroll-view scroll-y class="w-full h-36" @scroll="onScroll">
<div class="w-full h-36 bg-green-500"></div>
<div class="w-full h-36 bg-blue-500"></div>
<div class="w-full h-36 bg-gray-300"></div>
</scroll-view>
</template>