ScrollView

可滚动视图区域。扫码体验：

img.jpg

属性名类型默认值描述最低版本
classString外部样式名
styleString内联样式名
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
scroll-animation-durationNumber当scroll-with-animation设置为true时，可以设置scroll-animation-duration来控制动画的执行时间，单位ms1.9.0
enable-back-to-topBooleanfalse当点击iOS顶部状态栏或者双击安卓标题栏时，滚动条返回顶部，只支持竖向1.11.0
trap-scrollBooleanfalse纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发scroll-view自身的滚动。1.11.2
onScrollToUpperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件
onScrollToLowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件
onScrollEventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}
使用竖向滚动时，需要给一个固定高度，通过 acss 设置 height。

示例代码

  1. <view class="page">
  2.   <view class="page-description">可滚动视图区域</view>
  3.   <view class="page-section">
  4.     <view class="page-section-title">vertical scroll</view>
  5.     <view class="page-section-demo">
  6.       <scroll-view scroll-y="{{true}}" style="height: 200px;" onScrollToUpper="upper" onScrollToLower="lower" onScroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  7.         <view id="blue" class="scroll-view-item bc_blue"></view>
  8.         <view id="red"  class="scroll-view-item bc_red"></view>
  9.         <view id="yellow" class="scroll-view-item bc_yellow"></view>
  10.         <view id="green" class="scroll-view-item bc_green"></view>
  11.       </scroll-view>
  12.     </view>
  13.     <view class="page-section-btns">
  14.       <view onTap="tap">next</view>
  15.       <view onTap="tapMove">move</view>
  16.       <view onTap="scrollToTop">scrollToTop</view>
  17.     </view>
  18.   </view>
  20.   <view class="page-section">
  21.     <view class="page-section-title">horizontal scroll</view>
  22.     <view class="page-section-demo">
  23.       <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" >
  24.         <view id="blue2" class="scroll-view-item_H bc_blue"></view>
  25.         <view id="red2"  class="scroll-view-item_H bc_red"></view>
  26.         <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
  27.         <view id="green2" class="scroll-view-item_H bc_green"></view>
  28.       </scroll-view>
  29.     </view>
  30.   </view>
  31. </view>
  1. const order = ['blue', 'red', 'green', 'yellow'];
  3. Page({
  4.   data: {
  5.     toView: 'red',
  6.     scrollTop: 100,
  7.   },
  8.   upper(e) {
  9.     console.log(e);
  10.   },
  11.   lower(e) {
  12.     console.log(e);
  13.   },
  14.   scroll(e) {
  15.     console.log(e.detail.scrollTop);
  16.   },
  17.   scrollToTop(e) {
  18.     console.log(e);
  19.     this.setData({
  20.       scrollTop: 0,
  21.     });
  22.   },
  23. });

Tips

  • scroll-into-view 的优先级高于 scroll-top
  • 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

原文: https://docs.alipay.com/mini/component/scroll-view