scroll-view

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

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

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

代码示例

开发者工具中预览

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
scroll-x	boolean	false	否	允许横向滚动	1.0.0
scroll-y	boolean	false	否	允许竖向滚动	1.0.0
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡	1.0.0
upper-threshold	number	50	否	距顶部/左边多远时（单位 px），触发 scrolltoupper 事件	1.0.0
lower-threshold	number	50	否	距底部/右边多远时（单位 px），触发 scrolltolower 事件	1.0.0
scroll-top	number	--	否	设置竖向滚动条位置	1.0.0
scroll-left	number	--	否	设置横向滚动条位置	1.0.0
scroll-into-view	string	--	否	值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素	1.0.0
bindscroll	eventhandle	--	否	滚动时触发	1.0.0
bindscrolltoupper	eventhandle	--	否	滚动到顶部/左边	1.0.0
bindscrolltolower	eventhandle	--	否	滚动到底部/右边	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-x 为 true 的情况下，同时设置 scroll-top ，或者在 srcoll-y 为 true 的情况下，同时设置 scroll-left ，否则容易出现滑动位置偏差的问题。