Skip to main content

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

<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


.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

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#

NameTypeDescriptionDefault
scroll-xbooleanAllow lateral scrollingfalse
scroll-ybooleanAllow vertical scrollingfalse
scroll-topstring | numberSet vertical scroll bar position
scroll-leftstring | numberSet horizontal scroll bar position
scroll-into-viewstringThe value should be the ID of a child element (ID cannot start with a number). Set which direction to scroll, then scroll to the element in which direction
upper-thresholdstring | numberWhen it is far from the top / left, the scrolltupper event is triggered50
lower-thresholdstring | numberWhen it is far from the bottom / right, the scrollcolor event is triggered50
enhancedbooleanEnable the scroll view enhancement feature. After enabling, you can operate scroll view through ScrollViewContextfalse
fast-decelerationbooleanSliding deceleration rate control (effective after the enhanced attribute is turned on at the same time)false
show-scrollbarbooleanEnabled when enhanced:true, control the scrollbar show/hidefalse
refresher-enabledbooleanEnable pull-down refresh, support from jssdk >= 4.9.0false
refresher-thresholdnumberrefresher threshold to trigger refresh (in px), support from jssdk >= 4.9.045
refresher-default-stylestringrefresher default style, support from jssdk >= 4.9.0 options: black, white, none"black"
refresher-backgroundstringrefresher background style, support from jssdk >= 4.9.0"#FFF"
refresher-triggeredbooleanis refresher triggered, support from jssdk >= 4.9.0false

Events#

NameDescription
bindscrollbindscroll Triggered when scrolling,
Arguments
  • event: detail: Object — The detail event objectObject{ scrollLeft, scrollTop, scrollHeight, scrollWidth, scrollWidth, deltaX, deltaY }
bindscrolltoupperbindscrolltoupper Scroll to the top/Triggered on the left
bindscrolltolowerbindscrolltolower Scroll to the bottom/Triggered on the right
bindrefresherpullingbindrefresherpulling Triggered when pulling down
bindrefresherrefreshbindrefresherrefresh Triggered when refreshing
bindrefresherrestorebindrefresherrestore Triggered when pull-down refresher restoring
bindrefresherabortbindrefresherabort Triggered when refresh aborting