scroll-view

Scrollable view area. A view group that allows the view hierarchy placed within it to be scrolled. When using vertical scrolling, you need to give the scroll view a fixed height.

Example

bxml

Code
<view class="container">
  <view class="page-body">
    <view class="page-section-title">
      <text>scrollY Vertical Scroll</text>
    </view>
    <view class="page-section-spacing">
      <scroll-view scrollY style="height: 150px;" bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower" bindtap="onTap" bind:longpress="onLongpress" bindscroll="onScroll">
        <view class="scroll-view-item demo-text-1"></view>
        <view class="scroll-view-item demo-text-2"></view>
        <view class="scroll-view-item demo-text-3"></view>
      </scroll-view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">
      <text>scroll-x="{{true}}" Horizontal Scroll</text>
    </view>
    <view class="page-section-spacing">
      <scroll-view class="scroll-view_H" scroll-x="{{true}}" style=" width: 100%;" bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower" bindscroll="onScroll" scrollLeft="{{25}}">
        <view class="scroll-view-item_H demo-text-1"></view>
        <view class="scroll-view-item_H demo-text-2"></view>
        <view class="scroll-view-item_H demo-text-3"></view>
      </scroll-view>
    </view>
  </view>
  <view class="page-body">
    <view class="page-section-title">
      <text>scroll-y ScrollIntoView 2 item</text>
    </view>
    <view class="page-section-spacing">
      <scroll-view scroll-y="{{true}}" style="height: 150px;" bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower" bindscroll="onScroll" scroll-into-view="{{scrollIntoView}}">
        <view id="demo1" class="scroll-view-item demo-text-1"></view>
        <view id="demo2" class="scroll-view-item demo-text-2"></view>
        <view id="demo3" class="scroll-view-item demo-text-3"></view>
      </scroll-view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">
      <text>scroll-x ScrollIntoView 2 item</text>
    </view>
    <view class="page-section-spacing">
      <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%;" bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower" bindscroll="onScroll" scroll-into-view="{{scrollIntoView}}">
        <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
        <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
        <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
      </scroll-view>
    </view>
  </view>
  <view class="page-body">
    <view class="page-section-title">
      <text>Vertical Scroll with infinite scroll</text>
    </view>
    <view class="page-section-spacing">
      <scroll-view scroll-y="{{true}}" style="height: 150px;" bindscrolltolower="loadMore">
        <view bn:for="{{items}}" bn:key="index" class="scroll-view-item demo-text-{{(index % 3 + 1)}}"></view>
      </scroll-view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">
      <text>enhanced, fastDeceleration</text>
    </view>
    <view class="page-section-spacing">
      <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%;" bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower" bindscroll="onScroll" enhanced scroll-left="{{25}}" fastDeceleration>
        <view class="scroll-view-item_H demo-text-1"></view>
        <view class="scroll-view-item_H demo-text-2"></view>
        <view class="scroll-view-item_H demo-text-3"></view>
      </scroll-view>
    </view>

    <view class="page-section-spacing">
      <scroll-view scroll-y="{{true}}" style="height: 150px;" bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower" bindtap="onTap" bind:longpress="onLongpress" bindscroll="onScroll" scroll-top="{{25}}" enhanced fastDeceleration>
        <view class="scroll-view-item demo-text-1"></view>
        <view class="scroll-view-item demo-text-2"></view>
        <view class="scroll-view-item demo-text-3"></view>
      </scroll-view>
    </view>
  </view>
</view>

bxss

Code
.page-section-spacing {
  margin-top: 30px;
}
.scroll-view_H {
  white-space: nowrap;
}
.scroll-view-item {
  height: 150px;
}
.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 150px;
}

.demo-text-1 {
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1aad19;
  color: #ffffff;
  font-size: 18px;
}
.demo-text-1:before {
  content: "A";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2 {
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782d7;
  color: #ffffff;
  font-size: 18px;
}
.demo-text-2:before {
  content: "B";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3 {
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  color: #353535;
  font-size: 18px;
}
.demo-text-3:before {
  content: "C";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

js

Code
Page({
  data: {
    items: new Array(3).fill(1),
    scrollTop: 25,
    scrollIntoView: "demo3",
  },
  onShow() {
    setTimeout(() => {
      this.setData({
        scrollTop: 50,
        scrollIntoView: "demo2",
      });
    }, 3000);
  },
  onScroll(e) {
    console.log("onScroll", e);
  },
  onScrollToUpper(e) {
    console.log("onScrollToUpper", e);
  },
  onScrollToLower(e) {
    console.log("onScrollToLower", e);
  },
  onTap(e) {
    console.log(`[scroll-view] bindtap`, e);
  },
  onLongpress(e) {
    console.log(`[scroll-view] longpress`, e);
  },
  scrollToTop() {},
  loadMore() {
    this.setData({
      items: [...this.data.items, ...new Array(3).fill(1)],
    });
  },
});

Bug & Tip

• tip: The priority of scroll-into-view is higher than that of scroll-top.
• tip: Scrolling in the scroll-view will prevent the page from bouncing back, so scrolling in the scroll-view cannot trigger onpulldownrefresh.
• tip: To use the pull-down refresh, please use the scroll of the page instead of the scroll-view, so that you can return to the top of the page by clicking the status bar at the top.

Props

Events