开发
API

scroll-view

基础库 1.0.0 开始支持本组件。

可滚动视图区域,可实现横向滚动和竖向滚动。使用竖向滚动时,需要给定一个固定高度,可以通过 ttss 来设置 height。组件属性的长度单位支持 px 和 rpx。

如需在 <scroll-view> 中嵌套原生组件,请避免使用 vh/vw 单位设置<scroll-view> 宽高,否则部分安卓机在该组件滚动时可能出现原生组件不跟随等异常,可用百分比为单位避免该问题。

代码示例

开发者工具中预览

属性说明

属性名类型默认值必填说明最低支持版本
scroll-xbooleanfalse允许横向滚动1.0.0
scroll-ybooleanfalse允许竖向滚动1.0.0
scroll-with-animationbooleanfalse在设置滚动条位置时使用动画过渡1.0.0
upper-thresholdnumber50距顶部/左边多远时(单位 px),触发 scrolltoupper 事件1.0.0
lower-thresholdnumber50距底部/右边多远时(单位 px),触发 scrolltolower 事件1.0.0
scroll-topnumber--设置竖向滚动条位置1.0.0
scroll-leftnumber--设置横向滚动条位置1.0.0
scroll-into-viewstring--值应为某子元素 id(id 不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素1.0.0
bindscrolleventhandle--滚动时触发1.0.0
bindscrolltouppereventhandle--滚动到顶部/左边1.0.0
bindscrolltolowereventhandle--滚动到底部/右边1.0.0

扫码体验

请使用字节宿主APP扫码

Bug & Tip

  • Tip:在 iOS13.1 中,使用 bindscrolltolower 事件向 <scroll-view> 组件中添加子元素时,该组件会回到 scrollTop 为 0 的位置。将 <scroll-view> 组件的全部子元素包裹一层 <view> 可避免该问题。
  • Tip:在 <scroll-view> 中滚动无法触发 onPullDownRefresh,如果要使用下拉刷新,请使用页面滚动的下拉刷新。
  • Tip:在使用scroll-into-view的时候,请避免在 srcoll-xtrue 的情况下,同时设置 scroll-top ,或者在 srcoll-ytrue 的情况下,同时设置 scroll-left ,否则容易出现滑动位置偏差的问题。
点击纠错
评价此篇文档