移动端(H5)常用插件

orientationchange 只有移动端可用， 设备翻转，触发。

better-scroll

-国人打造

-h5 原生的滚动条，在移动端上，滚动会很卡顿。所以需要借助一些第三方的库。

安装   npm i better-scroll

• 需要滚动的元素外，必须要有一个盒子。且该盒子的 class 需要与 better-scroll 的实例绑定。
• 
  • probe 侦测   probeType 侦测类型
  • 0 和 1 都是不侦测
  • 2 手指滚动的过程中侦测，手指离开后的惯性滑动过程（better scroll 自带特效）中不侦测。
  • 3 只要滚动都侦测
• click 为 true 时，bscroll 里面元素的点击事件才能被监听到。
• pullUpLoad  配合   下拉刷新数据之内的功能使用。

>>  事件

——获取当前滚动的位置。

• 

–上拉加载更多数据

——只有   使用 bscroll.finishPullUp() ，之后才能再次下拉。

>>使用   滚动条中的默认属性，回到顶部

–scrollTo(x,y,滚动时间)

>>解决滚动卡顿，滚动条无法下拉

• 由于图片以及文字是异步请求来的、item 已经计算好了、图片才出来，图会把 item 撑大、影响已经计算好的可下拉高度。
• 所有需要手动   设置   重新计算下拉高度

解决方法：

• 监听每一张图片是否加载完成、只要有一张图片加载完成了、执行一次 refresh()
• vue 组件中   使用 v-on:load  / @load 监听
• 原生 js:
  • **img.onload=function() { ... }**
  • 手动刷新：重新计算下拉高度。
  • 重新计算 可下拉高度
  • this.$refs.scroll.scroll.refresh()