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.
Type
ComponentType<ScrollViewProps>
Examples
- React
- Vue
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>
)
}
}
<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 |