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 | 設置組件距離頂部/左部多遠時，觸發(fā)事件 | string | 50 px | - | upper-threshhold="50px" | - |
lower-threshhold | 設置組件距離底部/右部多遠時，觸發(fā)事件 | 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 | 內容不滿時是否允許滾動（注：必須在 | boolean | false | - | always-bounce="true" | 10.2.28 支持 |
事件
不支持 通用事件，支持的特定事件如下表所示：
名稱 | 描述 | 參數(shù) |
on-scroll | 在滾動中觸發(fā) | contentSize：內容區(qū)寬高 contentOffset：顯示區(qū)域偏移量 |
on-scrollstart | 當滾動開始時觸發(fā) | contentSize：內容區(qū)寬高 contentOffset：顯示區(qū)域偏移量 |
on-scrollend | 當滾動結束時觸發(fā) | contentSize：內容區(qū)寬高 contentOffset：顯示區(qū)域偏移量 |
on-scrolltoupper | 當滾動到距離頂部小于閾值時觸發(fā) | - |
on-scrolltolower | 當滾動到距離底部小于閾值時觸發(fā) | - |
示例
<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 不支持嵌套使用。