All Products
Search
Document Center

Scroll view

Last Updated: Feb 04, 2021

Movable view area.

Attribute Type Default value Description Minimum version
class String - External style name. -
style String - Inline style name. -
scroll-x Boolean false Horizontal scroll allowed. -
scroll-y Boolean false Vertical scroll allowed. -
upper-threshold Number 50 Distance from the top/left (in px) when the scrolltoupper event is triggered. -
lower-threshold Number 50 Distance from the bottom/right (in px) when the scrolltolower event is triggered. -
scroll-top Number - Position of the vertical scroll bar. -
scroll-left Number - Position of the horizontal scroll bar. -
scroll-into-view String - The value is a child element ID. When the element is scrolled to, the top of the element is aligned with the top of the scroll area. -
scroll-with-animation Boolean false Transition animations are used when the scroll bar position is set. -
scroll-animation-duration Number - When scroll-with-animation is set to true, scroll-animation-duration can be set to control the execution time of the animation. The value is in ms. 1.9.0
enable-back-to-top Boolean false When you tap the status bar at the top in iOS or double-tap the title bar in Android, the scroll bar returns to the top. Only vertical scroll is supported. 1.11.0
trap-scroll Boolean false For vertical scroll, when the scroll bar scrolls to the top or bottom, page scrolling is prohibited forcibly. Only the scroll of scroll-view can be triggered. 1.11.2
onScrollToUpper EventHandle - The scrolltoupper event is triggered when the scroll bar scrolls to the top/left. -
onScrollToLower EventHandle - The scrolltolower event is triggered when the scroll bar scrolls to the bottom/right. -
onScroll EventHandle - Triggered when scrolling. event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth} -
onTouchStart EventHandle - Start the touch action. 1.15.0
onTouchMove EventHandle - Move after the touch action. 1.15.0
onTouchEnd EventHandle - End the touch action. 1.15.0
onTouchCancel EventHandle - Tapping action interrupted by call reminder or pop-up window. 1.15.0
Note: When using vertical scroll, you need to specify a fixed height. You can use acss to set the height.

Code sample

 
  1. <view class="page">
  2. <view class="page-description">The scrollable view area</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. });

Note

  • The priority of scroll-into-view is higher than that of scroll-top.
  • The page is prevented from rebounding when scroll-view is scrolled. Therefore, onPullDownRefresh cannot be triggered when scroll happens in scroll-view.