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。 1.9.0
enable-back-to-top Boolean false 当点击 iOS 顶部状态栏或者双击安卓标题栏时,滚动条返回顶部,只支持竖向。 1.11.0
trap-scroll Boolean false 纵向滚动时,当滚动到顶部或底部时,强制禁止触发页面滚动,仍然只触发 scroll-view 自身的滚动。 1.11.2
onScrollToUpper EventHandle - 滚动到顶部/左边,会触发 scrolltoupper 事件。 -
onScrollToLower EventHandle - 滚动到底部/右边,会触发 scrolltolower 事件。 -
onScroll EventHandle - 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth} -
onTouchStart EventHandle - 触摸动作开始 1.15.0
onTouchMove EventHandle - 触摸后移动 1.15.0
onTouchEnd EventHandle - 触摸动作结束 1.15.0
onTouchCancel EventHandle - 触摸动作被打断,如来电提醒、弹窗 1.15.0
说明:使用竖向滚动时,需要给出固定高度,通过 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