scroll-view

可滚动视图区域。

属性名 类型 默认值 描述
class String - 外部样式名
style String - 内联样式名
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时（单位 px），触发 scrolltoupper 事件。
lower-threshold Number 50 距底部/右边多远时（单位 px），触发 scrolltolower 事件。
scroll-top Number - 设置竖向滚动条位置
scroll-left Number - 设置横向滚动条位置
scroll-into-view String - 值应为某子元素 ID，则滚动到该元素，元素顶部对齐滚动区域顶部。
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
scroll-animation-duration Number - 当
scroll-with-animation
设置为 true 时，可以设置
scroll-animation-duration
来控制动画的执行时间，单位 ms。
enable-back-to-top Boolean false 当点击 iOS 顶部状态栏或者双击安卓标题栏时，滚动条返回顶部，只支持竖向。
trap-scroll Boolean false 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
onScrollToUpper EventHandle - 滚动到顶部/左边，会触发 scrolltoupper 事件。
onScrollToLower EventHandle - 滚动到底部/右边，会触发 scrolltolower 事件。
onScroll EventHandle - 滚动时触发，
event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}
onTouchStart EventHandle - 触摸动作开始
onTouchMove EventHandle - 触摸后移动
onTouchEnd EventHandle - 触摸动作结束
onTouchCancel EventHandle - 触摸动作被打断，如来电提醒、弹窗

说明：使用竖向滚动时，需要给出固定高度，通过 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>
  19.   <view class="page-section">
  20.     <view class="page-section-title">horizontal scroll</view>
  21.     <view class="page-section-demo">
  22.       <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" >
  23.         <view id="blue2" class="scroll-view-item_H bc_blue"></view>
  24.         <view id="red2"  class="scroll-view-item_H bc_red"></view>
  25.         <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
  26.         <view id="green2" class="scroll-view-item_H bc_green"></view>
  27.       </scroll-view>
  28.     </view>
  29.   </view>
  30. </view>
  1. const order = ['blue', 'red', 'green', 'yellow'];
  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.detail.scrollTop);
  15.   },
  16.   scrollToTop(e) {
  17.     console.log(e);
  18.     this.setData({
  19.       scrollTop: 0,
  20.     });
  21.   },
  22. });

提示

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