scroll-view

解释：可滚动视图区域。

属性说明：

属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时（单位 px），触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时（单位 px），触发 scrolltolower 事件
scroll-topNumber-设置竖向滚动条位置。要动态设置滚动条位置，用法scroll-top="{= scrollTop =}"
scroll-leftNumber-设置横向滚动条位置。要动态设置滚动条位置，用法scroll-left="{= scrollLeft =}"
scroll-into-viewString-值应为某子元素 id（id 不能以数字开头）,设置滚动方向后，按方向滚动到该元素，动态设置用法scroll-into-view=”{= scrollIntoView =}”。
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
bindscrolltoupperEventHandle-滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolowerEventHandle-滚动到底部/右边，会触发 scrolltolower 事件
bindscrollEventHandle-滚动时触发， event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

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

示例：在开发者工具中预览效果

  1. <scroll-view scroll-y style="height: 300px;"
        bind:scrolltoupper="upper" bind:scrolltolower="lower" scroll-into-view="four"
        upper-threshold="10"  lower-threshold="10" scroll-top="150" bind:scroll="myscroll">
        <view id="one" class="bg-red">view1</view>
        <view id="two" class="bg-green">view2</view>
        <view id="three" class="bg-yellow">view3</view>
        <view id="four" class="bg-blue">view4</view>
    </scroll-view>

  1. .bg-red, .bg-yellow, .bg-blue, .bg-green {
        height: 150px;
        text-align: center;
    }
    .bg-red {
        background: #FFB6C1;
    }
    .bg-yellow {
        background: #FFD700;
    }
    .bg-blue {
        background: #87CEFA;
    }
    .bg-green {
        background: #98FB98;
    }

  1. Page({
        upper: e => {
            console.log('upper', e);
        },
        lower: e => {
            console.log('lower', e);
        },
        myscroll: e => {
            console.log('scroll', e);
        }
    });

说明：

  • 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件；
  • scroll-into-view 的优先级低于 scroll-top、scroll-left；
  • 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh；
  • 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view。