Vue中的better-scroll使用

首先就是我用这个插件的目的
传统的下滑右侧这个滚动有点丑,而且各个浏览器这个scrollbar还不一样!最可恶的在于css调节后,火狐浏览器却不支持。如今找到了这个插件!真是高兴的想吃辣条庆祝一下
官方网址https://better-scroll.github.io/docs/zh-CN/

Vue中的better-scroll使用_第1张图片

第一步:安装 引入

cnpm i better-scroll -S

然后在使用的页面引入

第二步 使用

  1. app忽略
  2. a就是准备用的滑动外盒子,里面爱多少多少不用管
  3. ul无序列表
  4. li用Vue的遍历来100个
  5. mounted里面this.test()
  6. test里面创建一个名字bs,为了把原本的ID进行赋值
  7. mouseWheel就是问你 鼠标滑动是否开启
  8. scrollY问你要不要开启下滑
  9. scrollbar问你要不要显示那个滑动的黑色小棍
  10. 最后就是你选择好的赋值回给scroll

最终效果

Vue中的better-scroll使用_第2张图片






爱我你怕了吗?
image

你可能感兴趣的:(文档)