better-scroll

vue之页面滚动，轮播图

better-scroll

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。
better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

常见html结构

<div class="wrapper"> 
　　<ul class="content"> 
　　　　<li>...</li> 
　　　　<li>...</li>
　　　　... 
　　</ul> 
</div>

可以参考如下图

绿色部分为wrapper，也就是父容器，他会有固定的高度。黄色部分为content，他是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当content的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们可以滚动内容区，这就是better-scroll的滚动原理。

那么，如何初始化better-scroll？如果是上述html结构，那么初始化代码如下：

import BScroll from 'better-scroll' 
let wrapper = document.querySelector('.wrapper') 
let scroll = new BScroll(wrapper, {})

better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数，

better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。所以同学们反馈的 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对，或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。
在vue中使用方法如下：

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

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper 访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。

这里的 this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，感兴趣的同学可以了解一下它的内部实现细节，底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。

作者：ustbhuangyi
链接：https://www.imooc.com/article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper 访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。

这里的 this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。

用到的属性：

probeType

    类型：Number
    默认值：0
    可选值：1、2、3
    作用：有时候我们需要知道滚动的位置。
当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。

click

    类型：Boolean
    默认值：false
    作用：better-scroll 默认会阻止浏览器的原生 click 事件。
当设置为 true，better-scroll 会派发一个 click 事件，
我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
但是自定义的 click 事件会阻止一些原生组件的行为，如 checkbox 的选中等，
所以一旦滚动列表中有一些原生表单组件，推荐的做法是监听 tap 事件，如下。

better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数，
作者：ustbhuangyi
链接：https://www.imooc.com/

article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。
作者：ustbhuangyi
链接：https://www.imooc.com/article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。
作者：ustbhuangyi
链接：https://www.imooc.com/article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。
作者：ustbhuangyi
链接：https://www.imooc.com/article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

什么是 better-scroll
作者：ustbhuangyi
链接：https://www.imooc.com/article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

什么是 better-scroll
作者：ustbhuangyi
链接：https://www.imooc.com/article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

什么是 better-scroll
作者：ustbhuangyi
链接：https://www.imooc.com/article/18232
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作