scroll-view

更新时间：2024-09-18 14:46:36

基础库1.2.0开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持

可滚动视图区域。使用竖向滚动时，需要给 scroll-view 一个固定高度。组件属性的长度单位支持 rpx/px（默认为 px）

属性

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
upper-threshold	string | number	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	string | number	50	否	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	string | number	0	否	设置竖向滚动条位置
scroll-left	string | number	0	否	设置横向滚动条位置
scroll-into-view	string		否	值应为某子元素 id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡
show-scrollbar	boolean	true	否	滚动条显隐控制
bindscrolltoupper	(e: { detail: Record<string, unknown> } & Event) => void		否	滚动到顶部/左边时触发
bindscrolltolower	(e: { detail: Record<string, unknown> } & Event) => void		否	滚动到底部/右边时触发
bindscroll	(e: { detail: { scrollLeft: number, scrollTop: number, scrollHeight: number, scrollWidth: number, deltaX: number, deltaY: number } } & Event) => void		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Bug & Tip

1. tip: scroll-into-view 的优先级高于 scroll-top
2. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
3. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
4. tip: 存在属性与控制限制 (opens new window)

扫码体验

示例代码