scroll-view 可滚动视图区域

scroll-view 可滚动视图区域

解释：可滚动视图区域，可实现横向滚动和竖向滚动。使用竖向滚动时，需要给定该组件一个固定高度，可以通过 CSS 设置 height 。

属性说明

属性名	类型	默认值	必填	说明
scroll-x	Boolean	false	否	允许横向滚动
scroll-y	Boolean	false	否	允许纵向滚动
upper-threshold	Number/String	50	否	距顶部 / 左边多远时（单位 px），触发 scrolltoupper 事件
lower-threshold	Number/String	50	否	距底部 / 右边多远时（单位 px），触发 scrolltolower 事件
scroll-top	Number/String		否	设置竖向滚动条位置。要动态设置滚动条位置，用法`scroll-top=”{= scrollTop =}”`。如果在设置组件渲染数据的同时设置了 scroll-top、scroll-left 值，需要在 swan.nextTick 回调中设置 scroll-top、scroll-left ，确保滚动条位置准确
scroll-left	Number/String		否	设置横向滚动条位置。要动态设置滚动条位置，用法`scroll-left=”{= scrollLeft =}”`。如果在设置组件渲染数据的同时设置了 scroll-top、scroll-left 值，需要在 swan.nextTick 回调中设置 scroll-top、scroll-left ，确保滚动条位置准确
scroll-into-view	String		否	值应为某子元素 id（id 不能以数字开头）。设置滚动方向后，按方向滚动到该元素，动态设置用法`scroll-into-view=”{= scrollIntoView =}”`
scroll-with-animation	Boolean	false	否	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	否	iOS 点击顶部导航栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		否	滚动到顶部 / 左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		否	滚动到底部 / 右边，会触发 scrolltolower 事件
bindscroll	EventHandle		否	滚动时触发，`event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}`

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：纵向滚动

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description">纵向滚动</view>
        <scroll-view
            class="scroll-view"
            scroll-y
            upper-threshold="1"
            lower-threshold="1"
            scroll-top="{= scrollTop =}"
            scroll-into-view="{= scrollIntoView =}"
            scroll-with-animation="true"
            enable-back-to-top="true"
            bindscrolltoupper="upper"
            bindscrolltolower="lower"
            bindscroll="scroll">
           <!-- 设置box与是scroll-view区域同高是为了滚动条能正常展示 -->
            <view class="box">
                <view id="one" class="color-a">A</view>
                <view id="two" class="color-b">B</view>
                <view id="three" class="color-c">C</view>
            </view>
        </scroll-view>  
        <view class="page-section-btns">
            <view class="next-page" bindtap="tap">下一页</view>
            <view bindtap="tapMove">滚动</view>
            <view class="scroll-to-top" bindtap="scrollToTop">回顶部</view>
        </view>
    </view>
</view>

代码示例 2：横向滚动

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description">横向滚动</view>
        <scroll-view
            class="scroll-view"
            scroll-x
            bindscrolltoupper="toLeft"
            bindscrolltolower="toRight"
            scroll-left="{= scrollLeft =}"
            upper-threshold="1"
            lower-threshold="1"
            bindscroll="scroll">
            <view id="four" class="color-a row-view">A</view>
            <view id="five" class="color-b row-view">B</view>
            <view id="six" class="color-c row-view">C</view>
        </scroll-view>
    </view>
</view>

Bug & Tip

Tip：请勿在 scroll-view 中使用 textarea、map、canvas、video 组件；详情请参考原生组件说明。
Tip：scroll-into-view 的优先级低于 scroll-top、scroll-left 。
Bug：在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh 。
Tip：若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view 。
Tip：scroll-into-view、scroll-top、scroll-left 需要在页面数据高度（或宽度）撑开时生效，若有异步加载数据，请在数据渲染完成时，重新动态赋值，才可生效。
Tip：在设置 scroll-view 组件 height 属性不是内容可视区总高度时，使用 swan.pageScrollTo API 无法生效。
Tip：暂不支持 border-radius 特性。

常见问题

Q：scroll-view 的 scroll-top 设置是否是无效的？

A：使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 CSS 设置 height 。

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description">纵向滚动</view>
        <scroll-view
            scroll-y
            style="height: 1.66rem;"
            scroll-into-view="{= toView =}"
            scroll-top="{= scrollTop =}"
        >
            <view id="one" class="color-a">A</view>
            <view id="two" class="color-b">B</view>
            <view id="three" class="color-c">C</view>
        </scroll-view>  
        <view class="page-section-btns">
            <view class="scrollToTop" bindtap="scrollToTop">回顶部</view>
        </view>
    </view>
</view>