better-scroll插件使用

1. 下载
   npm i better-scroll -S
2. 引入配置

import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'

let bs = new BScroll('.wrapper', {})

3. 出现的问题
   1. 滚轮可以滚动，鼠标拖拽不可以滚动
      查看滚动容器和滚动快的高度
      发现scrollerHeight: 1579滚动容器高度 = 滚动块高度
      重新设置滚动容器和滚动块样式

.home {
  width: 100vw;
  position: relative;
  height: 667px;
}
.wapperr {
  position: absolute;
  top: 100px;
  bottom: 74.5;
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 174.5px);
}

4. 现在的效果
   鼠标拖拽可以实现，滚轮不可以实现
   原因：刚刚查看上面原因时把一些配置注掉了。

      let acoll = new BetterScroll(this.$refs.wrapper, {
        // movable: true,
        // zoom: true,
        // click: true, //better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
        // probeType: 0, //
		// probeType: 2, //有回弹效果
		// probeType: 3, ////关闭回弹效果引起的scrollY不同步
        mouseWheel: true
      })
	  console.log(acoll)

打开mouseWheel: true后两者都可以实现。其他的就继续注着了。。。
https://blog.csdn.net/qq_40745143/article/details/103476978
better-scroll：参数说明：
probeType
可选值：1、2、3
作用：有时候我们需要知道滚动的位置。
当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
如果没有设置该值，其默认值为 0，即不派发 scroll 事件。

click
默认值：false
作用：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，
better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。

scrollX
默认值: false
作用：当设置为 true 的时候，可以开启横向滚动。
备注：当设置 eventPassthrough 为 ‘horizontal’ 的时候，该配置无效。

scrollY
默认值：true
作用：当设置为 true 的时候，可以开启纵向滚动。
备注：当设置 eventPassthrough 为 ‘vertical’ 的时候，该配置无效。

tap
默认值：false
作用：因为 better-scroll 会阻止原生的 click 事件，我们可以设置 tap 为 true，它会在区域被点击的时候派发一个 tap 事件，你可以像监听原生事件那样去监听它，如 element.addEventListener(‘tap’, doSomething, false);。
如果 tap 设置为字符串, 那么这个字符串就作为自定义事件名称。如 tap: ‘myCustomTapEvent’。

refresh()
作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。