# scroll-view

可滚动视图区域。使用竖向滚动时,需要给 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 在设置滚动条位置时使用动画过渡
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}
  1. tip: scroll-into-view 的优先级高于 scroll-top
  2. tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
  3. tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

# 扫码体验

# 示例代码

Copyright ©2024, All Rights Reserved