什么是卡片组件scroller_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

<scroller> 组件是一个容纳子组件进行横向或竖向滚动的容器组件，拥有平滑的滚动和高效的内存管理，适用于长列表的展示。

嵌入组件支持

支持任意组件嵌入。

样式

不支持通用样式中的部分能力，包括盒子模型中的 padding、布局中的 flex 容器、flex 成员、背景中的background-image 相关、hover、和动画。

属性

属性	描述	值类型	默认值	可选值	写法	备注
show-scrollbar	设置组件是否显示滚动条	boolean	false	-	show-scrollbar="true"	-
scroll-direction	设置组件滚动方向	string	vertical	vertical horizontal	scroll-direction="vertical"	-
upper-threshhold	设置组件距离顶部/左部多远时，触发事件	string	50 px	-	upper-threshhold="50px"	-
lower-threshhold	设置组件距离底部/右部多远时，触发事件	string	50 px	-	lower-threshhold="50px"	-
offset-accuracy	设置组件滚动过程中 callback 的频率	string	10 px	-	offset-accuracy="10px"	-
allow-bounce	是否允许有弹性效果	boolean	false	-	allow-bounce="true"	10.2.28 支持
always-bounce	内容不满时是否允许滚动（注：必须在 `allow-bounce` 为 true 时才生效）	boolean	false	-	always-bounce="true"	10.2.28 支持

事件

不支持通用事件，支持的特定事件如下表所示：

名称	描述	参数
on-scroll	在滚动中触发	contentSize：内容区宽高 contentOffset：显示区域偏移量
on-scrollstart	当滚动开始时触发	contentSize：内容区宽高 contentOffset：显示区域偏移量
on-scrollend	当滚动结束时触发	contentSize：内容区宽高 contentOffset：显示区域偏移量
on-scrolltoupper	当滚动到距离顶部小于阈值时触发	-
on-scrolltolower	当滚动到距离底部小于阈值时触发	-

示例

<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: console log 用 act debug 查看
                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>

重要

同方向的 scoller 不支持嵌套使用。