HomeDocs
跳到主要内容

scroll-view

简介​

可滚动视图区域。使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 CSS 设置 height。组件属性的长度单位默认为 px。

属性说明​

属性名类型默认值必填说明最低版本
scroll-xBooleanFALSE否允许横向滚动2.2.0
scroll-yBooleanFALSE否允许纵向滚动2.2.0
upper-thresholdNumber50否距顶部 / 左边多远时（单位 px），触发 scrolltoupper 事件2.2.0
lower-thresholdNumber50否距底部 / 右边多远时（单位 px），触发 scrolltolower 事件2.2.0
scroll-topNumber否设置竖向滚动条位置。2.2.0
scroll-leftNumber否设置横向滚动条位置。2.2.0
scroll-into-viewString否值应为某子元素 id（id 不能以数字开头）。设置滚动方向后，按方向滚动到该元素2.2.0
scroll-with-animationBooleanFALSE否在设置滚动条位置时使用动画过渡2.2.0
scroll-animation-durationNumber200否在设置滚动条位置时使用动画过渡时长2.2.0
refresher-enabledBooleanFALSE否是否启用下拉刷新功能2.2.0
refresh-stateBooleanFALSE否设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发，结合 refresh 事件使用，可以控制下拉刷新的关闭2.2.0
refresher-thresholdNumber50否设置自定义下拉刷新阈值2.2.0
pulling-refresh-textStringPulling否设置自定义下拉刷新下拉过程提示文案，可配合插槽自定义下拉样式2.2.0
loosing-refresh-textStringLoosing否设置自定义下拉刷新释放过程提示文案，可配合插槽自定义释放样式2.2.0
loading-refresh-rextStringLoading否设置自定义下拉刷新加载过程提示文案，可配合插槽自定义加载样式2.2.0
success-refresh-textStringSuccess否设置自定义下拉刷新刷新成功提示文案，可配合插槽自定义刷新成功样式2.2.0
refresh-durationNumber300否设置自定义下拉刷新动画过度时长2.2.0
scrolltoupperEventHandle否滚动到顶部 / 左边，会触发 scrolltoupper 事件2.2.0
scrolltolowerEventHandle否滚动到底部 / 右边，会触发 scrolltolower 事件2.2.0
onscrollEventHandle否滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}2.2.0
refreshEventHandle否下拉刷新时触发，触发后需要配合 refresh-state 手动关闭下拉刷新状态3.3.1
strict-modeBooleanTRUE否scrolltoupper 和 scrolltolower 这两个事件是否判断手势滑动方向3.3.1
scroll-refresh-enabledBooleanFALSE否是否启用上拉刷新功能3.3.1
loadmore-enabledBooleanFALSE否是否启用上拉加载更多功能 (建议当底部无更多内容时开启，避免上拉滚动过程冲突问题)3.5.1
loadmore-stateBooleanFALSE否设置当前上拉加载状态，true 表示上拉加载已经被触发，false 表示上拉加载未被触发，结合 loadmore 事件使用，可以控制上拉加载的关闭3.5.1
loadmore-thresholdNumber50否设置自定义上拉加载阈值3.5.1
bottom-pulling-refresh-textStringPulling否设置自定义上拉加载上拉过程提示文案，可配合插槽自定义下拉样式3.5.1
bottom-loosing-refresh-textStringLoosing否设置自定义上拉加载释放过程提示文案，可配合插槽自定义释放样式3.5.1
bottom-loading-refresh-textStringLoading否设置自定义上拉加载加载过程提示文案，可配合插槽自定义加载样式3.5.1
bottom-success-refresh-textStringSuccess否设置自定义上拉加载加载成功提示文案，可配合插槽自定义刷新成功样式3.5.1
loadmore-durationNumber300否设置自定义上拉加载动画过度时长3.5.1
loadmoreEventHandle否上拉刷新时触发，触发后需要配合loadmore-state手动关闭下拉刷新状态3.5.1

示例​

代码示例 1：Vertical Scroll 纵向滚动​

<view class="page-section mt16">
  <view class="page-section-title">
    <text>Vertical Scroll 纵向滚动</text>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      style="height: 300rpx"
      :scroll-y="true"
      :scroll-top="scrollTop"
      :scroll-into-view="scrollIntoView"
      :scroll-with-animation="true"
      :scroll-animation-duration="120"
      :refresh-state="freshY"
      :refresher-enabled="true"
      loosing-refresh-text="释放触发下拉刷新"
      bind:refresh="refreshY"
      bind:scrolltoupper="scrolltoupperY"
      bind:scrolltolower="scrolltolowerY"
      bind:onscroll="handleScrollY"
    >
      <template v-slot:pulling>
        <h1>自定义pulling</h1>
      </template>
      <view id="demo1" class="scroll-view-item demo-text-1">A</view>
      <view id="demo2" class="scroll-view-item demo-text-2">B</view>
      <view id="demo3" class="scroll-view-item demo-text-3">C</view>
      <view id="demo4" class="scroll-view-item demo-text-1">A</view>
      <view id="demo5" class="scroll-view-item demo-text-2">B</view>
      <view id="demo6" class="scroll-view-item demo-text-3">C</view>
    </scroll-view>
  </view>
  <view class="mt12">
    <button bind:tap="toNextY">to NextY</button>
    <button class="ml12" bind:tap="tapMove">tap move</button>
    <button class="ml12" bind:tap="scrollToDemo">scroll to demo3</button>
  </view>
</view>
Page({
  data: {
    freshY: false,
    scrollTop: 0,
    scrollIntoView: '',
  },

  refreshY() {
    this.setData({
      freshY: true,
    });
    setTimeout(() => {
      this.setData({
        freshY: false,
      });
    }, 1000);
  },
  handleScrollY(data) {
    console.log('handleScrollY', data);
  },
  scrolltoupperY() {
    dlt.showToast('scrolltoupperY');
  },
  scrolltolowerY() {
    dlt.showToast('scrolltolowerY');
  },

  toNextY() {
    const top = this.data.scrollTop;
    const step = Math.floor(top / 150);
    const next = (step + 1) * 150;

    this.setData({
      scrollTop: next > 750 ? 0 : next,
    });
  },

  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 20 > 750 ? 0 : this.data.scrollTop + 20,
    });
  },

  scrollToDemo() {
    this.setData({
      scrollIntoView: 'demo3',
    });
    setTimeout(() => {
      this.setData({
        scrollIntoView: '',
      });
    }, 300);
  },
});
.scroll-view-item {
  height: 300rpx;
  font-size: 18px;
  color: #ffffff;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1000;
}
.demo-text-1 {
  background-color: #1aad19;
}
.demo-text-2 {
  background-color: #2782d7;
}
.demo-text-3 {
  background-color: #f1f1f1;
  color: #353535;
}

代码示例 2：Horizontal Scroll 横向滚动​

<view class="page-section mt16">
  <view class="page-section-title">
    <text>Horizontal Scroll 横向滚动</text>
  </view>
  <view class="page-section-spacing">
    <scroll-view
      class="scroll-view_H"
      :scroll-x="true"
      bind:refresh="refreshX"
      :refresh-state="freshX"
      bind:scrolltoupper="scrolltoupperX"
      bind:scrolltolower="scrolltolowerX"
    >
      <view id="demox1" class="scroll-view-item_H demo-text-1">A</view>
      <view id="demox2" class="scroll-view-item_H demo-text-2">B</view>
      <view id="demox3" class="scroll-view-item_H demo-text-3">C</view>
    </scroll-view>
  </view>
</view>
Page({
  data: {
    freshX: false,
  },
  refreshX() {
    this.setData({
      freshX: true,
    });
    setTimeout(() => {
      this.setData({
        freshX: false,
      });
    }, 1000);
  },
  scrolltoupperX() {
    dlt.showToast('scrolltoupperX');
  },
  scrolltolowerX() {
    dlt.showToast('scrolltolowerX');
  },
});
Privacy agreementDeveloper agreementcontact us: developer_service.mi@transsion.com © 2024 MiniApp. All Rights Reserved.