scroll-view

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

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性类型默认值必填说明最低版本
scroll-xbooleanfalse允许横向滚动1.0.0
scroll-ybooleanfalse允许纵向滚动1.0.0
upper-thresholdnumber/string50距顶部/左边多远时,触发 scrolltoupper 事件1.0.0
lower-thresholdnumber/string50距底部/右边多远时,触发 scrolltolower 事件1.0.0
scroll-topnumber/string设置竖向滚动条位置1.0.0
scroll-leftnumber/string设置横向滚动条位置1.0.0
scroll-into-viewstring值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素1.0.0
scroll-with-animationbooleanfalse在设置滚动条位置时使用动画过渡1.0.0
enable-back-to-topbooleanfalseiOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向1.0.0
enable-flexbooleanfalse启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其孩子节点。2.7.3
scroll-anchoringbooleanfalse开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。2.8.2
bindscrolltouppereventhandle滚动到顶部/左边时触发1.0.0
bindscrolltolowereventhandle滚动到底部/右边时触发1.0.0
bindscrolleventhandle滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}1.0.0

Bug & Tip

  • tip: 基础库 2.4.0以下不支持嵌套textareamapcanvasvideo 组件
  • tip: scroll-into-view 的优先级高于 scroll-top
  • tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
  • tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

示例代码