bilibili小程序

使用小贴士

scroll-view

可滚动视图区域。

属性类型默认值说明版本
scroll-x
boolean
false
允许横向滚动
scroll-ybooleanfalse允许纵向滚动 
upper-thresholdnumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件 
lower-thresholdnumber50距底部/右边多远时（单位px），触发 scrolltolower 事件 
scroll-topnumber设置竖向滚动条位置 
scroll-leftnumber设置横向滚动条位置 
scroll-into-viewstring值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 
scroll-with-animationbooleanfalse在设置滚动条位置时使用动画过渡 
enable-back-to-topbooleanfalseiOS 点击顶部状态栏、Android 双击标题栏时，滚动条返回顶部，只支持竖向 
scrolltouppereventhandle滚动到顶部/左边，会触发 scrolltoupper 事件 
scrolltolowereventhandle滚动到底部/右边，会触发 scrolltolower 事件 
scrolleventhandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 

示例代码

<template>
    <scroll-view class="scroll-view" :scroll-y="true" style="">
        <div class="scroll-view-item-y demo-text-1">A</div>
        <div class="scroll-view-item-y demo-text-2">B</div>
        <div class="scroll-view-item-y demo-text-3">C</div>
    </scroll-view>
</template>
<script>
export default {};
</script>
<style scoped>
.scroll-view {
    width: 100vw;
    height: 200px;
}

.scroll-view-item-y {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo-text-1 {
    background-color: #ff62c5;
}

.demo-text-2 {
    background-color: #0EB10A;
}

.demo-text-3 {
    background-color: #BBA0A9;
}
</style>

Bug & Tip

  1. 使用 scroll-view 组件时，需要给 scroll-view 一个固定 宽度/高度。
  2. 请勿在 scroll-view 中使用 原生组件。
  3. scroll-into-view 的优先级高于 scroll-top 或 scroll-left。
  4. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh。
  5. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部。
← viewswiper →