视图容器scroll-view有哪些属性,如何使用_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

可滚动视图区域。

属性名	类型	默认值	描述	最低版本
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。

代码示例

<view class="page">
  <view class="page-description">可滚动视图区域</view>
  <view class="page-section">
    <view class="page-section-title">vertical scroll</view>
    <view class="page-section-demo">
      <scroll-view scroll-y="{{true}}" style="height: 200px;" onScrollToUpper="upper" onScrollToLower="lower" onScroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
        <view id="blue" class="scroll-view-item bc_blue"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="green" class="scroll-view-item bc_green"></view>
      </scroll-view>
    </view>
    <view class="page-section-btns">
      <view onTap="tap">next</view>
      <view onTap="tapMove">move</view>
      <view onTap="scrollToTop">scrollToTop</view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">horizontal scroll</view>
    <view class="page-section-demo">
      <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" >
        <view id="blue2" class="scroll-view-item_H bc_blue"></view>
        <view id="red2"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
        <view id="green2" class="scroll-view-item_H bc_green"></view>
      </scroll-view>
    </view>
  </view>
</view>

const order = ['blue', 'red', 'green', 'yellow'];
Page({
  data: {
    toView: 'red',
    scrollTop: 100,
  },
  upper(e) {
    console.log(e);
  },
  lower(e) {
    console.log(e);
  },
  scroll(e) {
    console.log(e.detail.scrollTop);
  },
  scrollToTop(e) {
    console.log(e);
    this.setData({
      scrollTop: 0,
    });
  },
});

提示

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