The <scroller> component is a container that enables horizontal or vertical scrolling for its child components. It provides smooth scrolling and efficient memory management, making it ideal for displaying long lists.
Embedded component support
You can embed any component.
Styles
The component does not support some common styles. These include padding, flex container and member layout properties, the background-image property, hover effects, and animations.
Properties
Property | Description | Value type | Default value | Optional values | Syntax | Notes |
show-scrollbar | Sets whether the scrollbar is displayed. | Boolean | false | - | show-scrollbar="true" | - |
scroll-direction | Sets the scroll direction of the component. | String | vertical | vertical horizontal | scroll-direction="vertical" | - |
upper-threshhold | Sets the distance from the top or left edge to trigger an event. | String | 50 px | - | upper-threshhold="50px" | - |
lower-threshhold | Sets the distance from the bottom or right edge to trigger an event. | string | 50 px | - | lower-threshhold="50px" | - |
offset-accuracy | Specifies the behavior during component scrolling. callback frequency | String | 10 px | - | offset-accuracy="10px" | - |
allow-bounce | Enables or disables the bounce effect. | Boolean | false | - | allow-bounce="true" | 10.2.28 Support |
always-bounce | Specifies whether to allow scrolling when the content does not fill the container. Note: This property takes effect only when | Boolean | false | - | always-bounce="true" | 10.2.28 Support |
Events
The component does not support common events. The following table lists the supported events.
Name | Description | Parameters |
on-scroll | Triggered during scrolling. | contentSize: The width and height of the content area. contentOffset: The offset of the display area. |
on-scrollstart | Triggered when scrolling starts. | contentSize: The width and height of the content area. contentOffset: The offset of the display area. |
on-scrollend | Triggered when scrolling ends. | contentSize: The width and height of the content area. contentOffset: The offset of the display area. |
on-scrolltoupper | Triggered when the scroll position is less than the threshold from the top. | - |
on-scrolltolower | Triggered when the scroll position is less than the threshold from the bottom. | - |
Example
<template>
<scroller class="root" ref="scroller" show-scrollbar="true" scroll-direction="horizontal" @on-scroll="onScroll()" @on-scrollstart="onScrollStart()" @on-scrolltoupper="onScrollToUpper()" @on-scrollend="onScrollEnd()" @on-scrolltolower="onScrollToLower()" offset-accuracy="40px">
<text class="message" :value="message" @click="onClick()"></text>
<image class="image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18%2F8%2F125b6560a6ag214.jpg&refer=http%3A%2F%2F1812.img.pp.sohu.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623901796&t=5e35208441139081956042a69907f7f5"></image>
<text class="message" :value="message" @click="onClick()"></text>
<text class="message" :value="message" @click="onClick()"></text>
<text class="message" :value="message" @click="onClick()"></text>
</scroller>
</template>
<script>
export default {
data: {
message: 'Hello Cube 1'
},
beforeCreate() {
this.data.message = 'Hello Cube 2'
},
didAppear() {
},
methods: {
onClick() {
// NOTE: Use act debug to view console logs.
console.log('invoke on-click event');
},
onScroll(data) {
console.log("onScroll---" + JSON.stringify(data));
},
onScrollStart(data) {
console.log("onScrollStart---" + JSON.stringify(data));
},
onScrollEnd(data) {
console.log("onScrollEnd---" + JSON.stringify(data));
},
onScrollToUpper() {
console.log("onScrollToUpper---");
},
onScrollToLower() {
console.log("onScrollToLower---");
},
}
}
</script>>
<style>
.root {
display: flex;
flex-direction: row;
align-items: center;
background-color: white;
width: 100%;
height: 400px;
}
.message {
color: black;
font-size: 50rpx;
}
.image {
width: 200px;
height: 400px;
}
</style>Nesting scrollers with the same scroll direction is not supported.