• scroll-view
    • Bug & Tip

    scroll-view

    可滚动视图区域。

    属性名类型默认值说明
    scroll-xBooleanfalse允许横向滚动
    scroll-yBooleanfalse允许纵向滚动
    upper-thresholdNumber / String50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
    lower-thresholdNumber / String50距底部/右边多远时（单位px），触发 scrolltolower 事件
    scroll-topNumber / String设置竖向滚动条位置（单位px）
    scroll-leftNumber / String设置横向滚动条位置（单位px）
    scroll-into-viewString值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
    scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
    enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
    bindscrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件
    bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件
    bindscrollEventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
    aria-labelString无障碍访问，（属性）元素的额外描述

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

    示例代码：

    1. <view class="section">
    2.   <view class="section__title">vertical scroll</view>
    3.   <view class="section__title">纵向滚动</view>
    4.   <scroll-view
    5.     scroll-y
    6.     style="height: 200px;"
    7.     bindscrolltoupper="upper"
    8.     bindscrolltolower="lower"
    9.     bindscroll="scroll"
    10.     scroll-into-view="{{toView}}"
    11.     scroll-top="{{scrollTop}}"
    12.   >
    13.     <view id="green" class="scroll-view-item bc_cyanblue">A</view>
    14.     <view id="red" class="scroll-view-item bc_blue">B</view>
    15.   </scroll-view>
    16. </view>
    17. <view class="section section_gap">
    18.   <view class="section__title">horizontal scroll</view>
    19.   <view class="section__title">横向滚动</view>
    20.   <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    21.     <view id="green" class="scroll-view-item_H bc_cyanblue"></view>
    22.     <view id="red" class="scroll-view-item_H bc_blue"></view>
    23.   </scroll-view>
    24. </view>
    1. const order = ['red', 'yellow', 'blue', 'green', 'red']
    2. Page({
    3.   data: {
    4.     toView: 'red',
    5.     scrollTop: 100
    6.   },
    7.   upper(e) {
    8.     console.log(e)
    9.   },
    10.   lower(e) {
    11.     console.log(e)
    12.   },
    13.   scroll(e) {
    14.     console.log(e)
    15.   },
    16.   tap(e) {
    17.     for (let i = 0; i < order.length; ++i) {
    18.       if (order[i] === this.data.toView) {
    19.         this.setData({
    20.           toView: order[i + 1]
    21.         })
    22.         break
    23.       }
    24.     }
    25.   },
    26.   tapMove(e) {
    27.     this.setData({
    28.       scrollTop: this.data.scrollTop + 10
    29.     })
    30.   }
    31. })

    scroll-view

    Bug & Tip
    • tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
    • tip: scroll-into-view 的优先级高于 scroll-top
    • tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
    • tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部