scroll-view 可滚动视图组件,用于包裹可滚动元素,支持横向滚动和纵向滚动。
扫码体验:
示例代码
<style>
.red {
background-color: #f56264;
}
.green {
background-color: #1fb822;
}
.blue {
background-color: #24b0fc;
}
.yellow {
background-color: #F0E68C;
}
.scroll-view-item {
width: 100%;
height: 100px;
color: #fff;
}
.scroll-view-item_H {
display: inline-block;
width: 200px;
height: 200px;
color: #fff;
}
.scroll-view_H {
white-space: nowrap;
}
</style>
<template>
<view class="container">
<view class="page-section">
<view class="page-section-title">vertical scroll</view>
<view class="page-section-demo">
<scroll-view
style="height: 200px;"
scroll-with-animation
:scroll-y="true"
:scroll-into-view="toView"
:scroll-top="scrollTop"
@scrolltoupper="upper"
@scrolltolower="lower"
@scroll="scroll"
>
<view id="blue" class="scroll-view-item blue"></view>
<view id="red" class="scroll-view-item red"></view>
<view id="yellow" class="scroll-view-item yellow"></view>
<view id="green" class="scroll-view-item green"></view>
</scroll-view>
</view>
<view class="page-section-btns">
<button @click="tap">next</button>
<button @click="tapMove">move</button>
<button @click="tapMoveTop">scrollToTop</button>
</view>
</view>
<view class="page-section">
<view class="page-section-title">horizontal scroll</view>
<view class="page-section-demo">
<scroll-view class="scroll-view_H" :scroll-x="true" style="width: 100%">
<view id="blue2" class="scroll-view-item_H blue"></view>
<view id="red2" class="scroll-view-item_H red"></view>
<view id="yellow2" class="scroll-view-item_H yellow"></view>
<view id="green2" class="scroll-view-item_H green"></view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
toView: 'red',
scrollTop: 100,
};
},
methods: {
scroll(evt) {
console.log(evt)
},
upper(evt) {
console.log(evt)
},
lower(evt) {
console.log(evt)
},
tap(evt) {
var order = ['red', 'yellow', 'blue', 'green', 'red'];
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.toView) {
this.toView = order[i + 1];
break;
}
}
},
tapMove(evt) {
this.scrollTop = this.scrollTop + 80;
if (this.scrollTop > 200) {
this.scrollTop = 0;
}
},
tapMoveTop() {
this.scrollTop = 0;
}
}
};
</script>
属性
属性名 | 类型 | 默认值 | 说明 |
class | String | '' | 外部样式名 |
style | String | '' | 内联样式名 |
scroll-y | Boolean | false | 允许纵向滚动 |
scroll-x | Boolean | false | 允许横向滚动 |
upper-threshold | Number | 50 | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |
lower-threshold | Number | 50 | 距底部/右边多远时(单位px),触发 scrolltolower 事件 |
lower-emit-once | Boolean | false | 每次滚动到范围内,只触发一次 scrolltolower 事件 |
upper-emit-once | Boolean | false | 每次滚动到范围内,只触发一次 scrolltoupper 事件 |
scroll-top | Number | 0 | 设置竖向滚动条位置 |
scroll-left | Number | 0 | 设置横向滚动条位置 |
scroll-into-view | String | '' | 值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部 |
scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 |
scrolltoupper | EventHandler | noop | 滚动到顶部/左边,会触发 scrolltoupper 事件 |
scrolltolower | EventHandler | noop | 滚动到底部/右边,会触发 scrolltolower 事件 |
scroll | EventHandler | noop | 滚动时触发,event.detail = { scrollLeft, scrollTop, scrollHeight, scrollWidth } |
在文档使用中是否遇到以下问题
更多建议
匿名提交