scroll-view

可滚动视图区域。

属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
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}

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

示例代码

  1. <!--scroll-view.jxml-->
  2.     <view class="section ">
  3.         <view class="section-title">
  4.                 <text>纵向滑动 scroll-y</text>
  5.             </view>
  6.       <view class="">
  7.         <scroll-view
  8.           style="height: 300rpx;"
  9.           scroll-y
  10.           bindscrolltoupper="upper"
  11.           bindscrolltolower="lower"
  12.           bindscroll="scroll"
  13.         >
  14.           <view class="scroll-view_H">
  15.             <view id="A1" class="scroll-view-item_H scroll-1">A1</view>
  16.             <view id="A2" class="scroll-view-item_H scroll-2">A2</view>
  17.             <view id="A3" class="scroll-view-item_H scroll-3">A3</view>
  18.           </view>
  19.           <view class="scroll-view_H">
  20.             <view id="B1" class="scroll-view-item_H scroll-2">B1</view>
  21.             <view id="B2" class="scroll-view-item_H scroll-3">B2</view>
  22.             <view id="B3" class="scroll-view-item_H scroll-1">B3</view>
  23.           </view>
  24.           <view class="scroll-view_H">
  25.             <view id="C1" class="scroll-view-item_H scroll-3">C1</view>
  26.             <view id="C2" class="scroll-view-item_H scroll-1">C2</view>
  27.             <view id="C3" class="scroll-view-item_H scroll-2">C3</view>
  28.           </view>
  29.         </scroll-view>
  30.       </view>
  31.     </view>
  32.       <view class="section section-vertical-spacing">
  33.           <view class="section-title">
  34.                 <text>横向滑动 scroll-x</text>
  35.                </view>
  36.       <view class="section-spacing">
  37.         <scroll-view
  38.           style="height: 300rpx;"
  39.           scroll-x
  40.           bindscrolltoupper="upper"
  41.           bindscrolltolower="lower"
  42.           bindscroll="scroll"
  43.         >
  44.           <view class="scroll-view_H">
  45.             <view id="A1" class="scroll-view-item_H scroll-1">A1</view>
  46.             <view id="A2" class="scroll-view-item_H scroll-2">A2</view>
  47.             <view id="A3" class="scroll-view-item_H scroll-3">A3</view>
  48.           </view>
  49.           <view class="scroll-view_H">
  50.             <view id="B1" class="scroll-view-item_H scroll-2">B1</view>
  51.             <view id="B2" class="scroll-view-item_H scroll-3">B2</view>
  52.             <view id="B3" class="scroll-view-item_H scroll-1">B3</view>
  53.           </view>
  54.           <view class="scroll-view_H">
  55.             <view id="C1" class="scroll-view-item_H scroll-3">C1</view>
  56.             <view id="C2" class="scroll-view-item_H scroll-1">C2</view>
  57.             <view id="C3" class="scroll-view-item_H scroll-2">C3</view>
  58.           </view>
  59.         </scroll-view>
  60.       </view>
  61.     </view>

scroll-view - 图1

Bug & Tip

  1. tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
  2. tip: scroll-into-view 的优先级高于 scroll-top
  3. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh