H5页面（四）效果之实现页面滚动--------better-scroll插件
前端开发一起交流QQ群：740034288
下载并用better.scroll.js文件；<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
中文文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
1. 在vue项目中应用better-scroll：
npm install --save better-scroll ;
import Bscroll from "better-scroll"；
<div ref='leftWrap' class="wrap">
<div class="wrap-content">
//滚动的所有内容写在这里里面
</div>
</div>
.wrap{ //通过相对/绝对定位固定.wrap的宽高
width:100%;
position:absolute;
top:350px;
bottom:0;
left:0;
}
注意：.wrap需要固定宽高，.wrap-content可以为默认样式，但是滚动的内容需要写在里面.
this.$nextTick(()=>{ //一定要在页面从后台获取数据完成之后，且渲染视图DOM完成之后
//实例better-scroll
this.leftBscroll=new Bscroll(this.$refs.leftWrap,{ //实例化Bscroll并赋值给leftBscroll变量
click:true //better-scroll会默认阻止一些事件，所有需要在这里开启左侧目录可以点击，右
侧滚动到相应目录下,this.$refs.leftWrap表示哪个元素容器里面的内容滚动，
在vue的元素中<div ref='leftWrap'></div>
});
})
better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对，或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。
this.$nextTick 是一个异步函数，确保了 DOM 已经渲染
Vue中应用better-scroll是 created 这个钩子函数里请求数据而不是放到 mounted 的钩子函数里？因为 requestData 是发送一个网络请求，这是一个异步过程，当拿到响应数据的时候，Vue 的 DOM 早就已经渲染好了，但是数据改变 —> DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll。
2. 在html里面直接应用better-scroll：
问题二：原生js下怎么引用better-scroll插件？
解决：
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
var rankBox=document.querySelector(".rank-box");
var scroll=new BScroll(rankBox)；
案例: