better-scroll滚定插件

滚动原理：
浏览器的滚动条：
当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也 就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
注意：
我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。
如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。

在vue中的用法：

1.在github中找到并安装第三方插件
npm install better-scroll --save
2.在vue中模块中引入

<template> 
    <div class="wrapper" ref="wrapper">
        <ul class="content"> 
            <li>...</li> 
            ... 
        </ul>
     </div> 
</template> 
<script> 
    import BScroll from 'better-scroll' 
    export default { 
        mounted() { 
            this.$nextTick(() => { 
                this.scroll = new Bscroll(this.$refs.wrapper, {}) 
            }) 
        } 
    } 

当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
如果没有设置该值，其默认值为 0，即不派发 scroll 事件。

• 点赞
• 收藏
• 分享
• • 文章举报

qq_45664442 发布了1 篇原创文章 · 获赞 0 · 访问量 16 私信 关注

标签：滚动条,插件,probeType,派发,better,视口,scroll
来源： https://blog.csdn.net/qq_45664442/article/details/104619178