scroller

Embedded component support

Supports embedding any component.

Styles

Some common styles are not supported, including padding, flex container and member layout properties, background-image, hover effects, and animations.

Properties

Property	Description	Value type	Default value	Optional values	Syntax	Notes
show-scrollbar	Specifies whether to display the scrollbar.	Boolean	false	-	show-scrollbar="true"	-
scroll-direction	Specifies the scroll direction.	String	vertical	vertical horizontal	scroll-direction="vertical"	-
upper-threshhold	Specifies the distance from the top or left edge that triggers the scroll-to-upper event.	String	50 px	-	upper-threshhold="50px"	-
lower-threshhold	Specifies the distance from the bottom or right edge that triggers the scroll-to-lower event.	string	50 px	-	lower-threshhold="50px"	-
offset-accuracy	Controls the scroll callback frequency. callback frequency	String	10 px	-	offset-accuracy="10px"	-
allow-bounce	Specifies whether to enable 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. This property takes effect only when allow-bounce is set to true.	Boolean	false	-	always-bounce="true"	10.2.28 Support

Events

Common events are not supported. 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 within the upper threshold distance from the top.	-
on-scrolltolower	Triggered when the scroll position is within the lower threshold distance 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>