设置竖向滚动条位置,内容底部到 scroll 底部的距离,如果有滚动吸附效果则先滚动再吸附。同时设置 scroll-top 和scroll-bottom 以scroll-top为准
scroll-left
<number>
|
<string>
设置横向滚动条位置,内容左侧到 scroll 左侧的距离,如果有滚动吸附效果则先滚动再吸附
scroll-right
<number>
|
<string>
设设置横向滚动条位置,内容右侧到 scroll 右侧的距离,如果有滚动吸附效果则先滚动再吸附。同时设置 scroll-left 和scroll-right 以scroll-left为准
bounces
<boolean>
false
是否边界回弹
支持
通用样式
<template>
<div class="page">
<scroll id="scrollId" scroll-y="true" onscrolltop="handleScrollTop">
<div class="item">
<text>北京</text>
</div>
<div class="item">
<text>上海</text>
</div>
<div class="item">
<text>广州</text>
</div>
<div class="item">
<text>深圳</text>
</div>
</scroll>
</div>
</template>
<script>
export default {
onShow() {
this.$element('scrollId').getScrollRect({
success({ width, height }) {
console.log('宽度', width);
console.log('高度', height);
handleScrollTop() {
console.info('scrolled top.')
scrollTo() {
this.$element('scrollId').scrollTo({
top: 1000,
left: 0,
behavior: 'smooth'
scrollBy() {
this.$element('scrollId').scrollBy({
top: 1000,
left: 0,
behavior: 'smooth'
</script>
<style>
.page {
justify-content: center;
align-items: center;
#scrollId {
width: 50%;
height: 100px;
flex-direction: column;
background-color: yellowgreen;
.item {
width: 100%;
height: 50px;
justify-content: center;
</style>