ScrollView - 《Taro 文档帮助手册教程》

sidebar_label: ScrollView
Type
Examples
ScrollViewProps
- Property Support
- onScrollDetail

title: ScrollView

sidebar_label: ScrollView

The scrollable view area. When vertical scrolling is used, a fixed height must set for scroll-view via WXSS. The unit of length of the component’s properties is px by default.

Tips: The ScrollView component in H5 is implemented by scrolling inside a container with a fixed height (or width), so it is important to set the height of the container correctly. For example, if the height of the ScrollView expands the body, there will be two scrollbars at the same time (the scrollbar under the body and the scrollbar of the ScrollView). If the ScrollView component in the WeChat mini program is set to scrollX horizontally and has multiple child elements (a single child element with a fixed width will scroll horizontally), you need to set white-space: nowrap with WXSS to ensure that the element does not change lines, and set display: inline-inline for the ScrollView internal elements with display: inline-block to make them scroll horizontally.

Reference

Type

ComponentType<ScrollViewProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx
export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  onScrollToUpper() {}

  // or use arrow function
  // onScrollToUpper = () => {}

  onScroll(e){
    console.log(e.detail)
  }

  render() {
    const scrollStyle = {
      height: '150px'
    }
    const scrollTop = 0
    const Threshold = 20
    const vStyleA = {
      height: '150px',
      'background-color': 'rgb(26, 173, 25)'
    }
    const vStyleB = {
       height: '150px',
      'background-color': 'rgb(39,130,215)'
    }
    const vStyleC = {
      height: '150px',
      'background-color': 'rgb(241,241,241)',
      color: '#333'
    }
    return (
      <ScrollView
        className='scrollview'
        scrollY
        scrollWithAnimation
        scrollTop={scrollTop}
        style={scrollStyle}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
        onScrollToUpper={this.onScrollToUpper.bind(this)} // When using the arrow function, you can write it like `onScrollToUpper={this.onScrollToUpper}`
        onScroll={this.onScroll}
      >
        <View style={vStyleA}>A</View>
        <View style={vStyleB}>B</View>
        <View style={vStyleC}>C</View>
      </ScrollView>
    )
  }
}

html
<template>
  <view class="container">
    <view class="page-body">
      <view class="page-section">
        <view class="page-section-title">
          <text>Vertical Scroll</text>
        </view>
        <view class="page-section-spacing">
          <scroll-view :scroll-y="true" style="height: 300rpx;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" :scroll-into-view="toView" :scroll-top="scrollTop">
            <view id="demo1" class="scroll-view-item demo-text-1">1</view>
            <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
            <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          </scroll-view>
        </view>
      </view>
      <view class="page-section">
        <view class="page-section-title">
          <text>Horizontal Scroll</text>
        </view>
        <view class="page-section-spacing">
          <scroll-view class="scroll-view_H" :scroll-x="true" @scroll="scroll" style="width: 100%">
            <view id="demo21" class="scroll-view-item_H demo-text-1">a</view>
            <view id="demo22"  class="scroll-view-item_H demo-text-2">b</view>
            <view id="demo23" class="scroll-view-item_H demo-text-3">c</view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const order = ['demo1', 'demo2', 'demo3']
export default {
  name: 'Index',
  data() {
    return {
      scrollTop: 0,
      toView: 'demo2'
    }
  },

  methods: {
    upper(e) {
      console.log('upper:', e)
    },

    lower(e) {
      console.log('lower:', e)
    },

    scroll(e) {
      console.log('scroll:', e)
    }
  }
}
</script>

<style>
.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

.demo-text-1 { background: #ccc; }
.demo-text-2 { background: #999; }
.demo-text-3 { background: #666; }
</style>

ScrollViewProps

Property	Type	Default	Required	Description
scrollX	`boolean`	`fasle`	No	Supports horizontal scrolling.
scrollY	`boolean`	`fasle`	No	Supports vertical scrolling.
upperThreshold	`number`	`50`	No	Specifies the distance from the top/left of the page when a scrolltoupper event is triggered.
lowerThreshold	`number`	`50`	No	Specifies the distance from the bottom/right of the page when a scrolltoupper event is triggered.
scrollTop	`number`		No	Specifies the location of the vertical scroll bar.
scrollLeft	`number`		No	Specifies the location of the horizontal scroll bar.
scrollIntoView	`string`		No	Specifies the direction to which the scroll bar can be moved. Its value should be the ID of a child element (the ID cannot begin with a number), and this child element is scrolled in the direction specified in this property.
scrollWithAnimation	`boolean`	`fasle`	No	Uses an animation for transition when setting the scroll bar.
enableBackToTop	`boolean`	`fasle`	No	Enables the scroll bar to return to the top when the top status bar is tapped on iOS or the title bar is double-tapped on Android. Only vertical scrolling is supported.
enableFlex	`boolean`	`fasle`	No	Enables the flexbox layout. When enabled, the current node with `display: flex` declared becomes a flex container and acts on its children.
scrollAnchoring	`boolean`	`fasle`	No	Turn on the scroll anchoring feature, which controls the scroll position from jittering as the content changes, only on iOS, see the CSS `overflow-anchor` property on Android.
refresherEnabled	`boolean`	`fasle`	No	Enable custom drop-down refresh.
refresherThreshold	`number`	`45`	No	Set a custom drop-down refresh threshold.
refresherDefaultStyle	`string`	`‘black’`	否	Set custom dropdown refresh default style, support `black \| white \| none`, none means don’t use default style.
refresherBackground	`string`	`‘#FFF’`	No	Set custom drop-down refresh area background color
refresherTriggered	`boolean`	`fasle`	No	Set the current dropdown refresh status, true means the dropdown refresh has been triggered, false means the dropdown refresh has not been triggered.
onScrollToUpper	`(event: BaseEventOrigFunction<any>) => any`		No	Scrolling to the top/left will trigger the scrolltoupper event.
onScrollToLower	`(event: BaseEventOrigFunction<any>) => any`		No	Scrolling to the bottom/right will trigger the scrolltolower event.
onScroll	`(event: BaseEventOrigFunction<onScrollDetail>) => any`		No	Triggered on scrolling. `event.detail = {{ scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}}`
onRefresherPulling	`(event: BaseEventOrigFunction<any>) => any`		No	Custom dropdown refresh control is dropped.
onRefresherRefresh	`(event: BaseEventOrigFunction<any>) => any`		No
onRefresherRestore	`(event: BaseEventOrigFunction<any>) => any`		No	Custom dropdown refresh is reset.
onRefresherAbort	`(event: BaseEventOrigFunction<any>) => any`		No	Custom dropdown refresh is aborted.

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
ScrollViewProps.scrollX	✔️	✔️	✔️	✔️	✔️	✔️(二选一)
ScrollViewProps.scrollY	✔️	✔️	✔️	✔️	✔️	✔️(二选一)
ScrollViewProps.upperThreshold	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.lowerThreshold	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.scrollTop	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.scrollLeft	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.scrollIntoView	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.scrollWithAnimation	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.enableBackToTop	✔️		✔️			✔️
ScrollViewProps.enableFlex	✔️
ScrollViewProps.scrollAnchoring	✔️
ScrollViewProps.refresherEnabled	✔️
ScrollViewProps.refresherThreshold	✔️
ScrollViewProps.refresherDefaultStyle	✔️
ScrollViewProps.refresherBackground	✔️
ScrollViewProps.refresherTriggered	✔️
ScrollViewProps.onScrollToUpper	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.onScrollToLower	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.onScroll	✔️	✔️	✔️	✔️	✔️	✔️
ScrollViewProps.onRefresherPulling	✔️
ScrollViewProps.onRefresherRefresh	✔️
ScrollViewProps.onRefresherRestore	✔️
ScrollViewProps.onRefresherAbort	✔️

onScrollDetail

Property	Type	Description
scrollLeft	`number`	Horizontal scrollbar position.
scrollTop	`number`	Vertical scrollbar position.
scrollHeight	`number`	Scroll bar height
scrollWidth	`number`	Scroll bar width
deltaX	`number`
deltaY	`number`