scroller

<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 不支持嵌套使用。