vue3 使用better-scroll滚动

在GitHub里搜索这个名称

 

 

 然后点进去，获取下载方式，通过vue终端进行下标

 

 

 

 

 

 

 下载完成在需要的Vue组件页面里引入

 

 在视图HTML上我们要滚动的结构要使用两层div包裹，并给出相应的class

 

 

 

 其次在js里即逻辑层

一般在vue3里我们所有的代码都是写在setup里的所以我们需要在这个页面加载完成后写入

即写在onMounted里

在写入onMounted里时我们也要先引入到当前页面才可使用

 

 然后setup(){　

　　onMounted(()=>{

　　写入事件方法等、。。。。。

　　})

}

 

 

betterscroll的属性probetype设置3,

当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发​​scroll 事件​​；

当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；

当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。

如果没有设置该值，其默认值为 0，即不派发 scroll 事件

refresh:

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

 

 css