第一步:下载
直接在项目中下载better-scroll
![](https://img.haomeiwen.com/i20901775/fd38ac8b08cb9718.png)
第二步:引入
在需要的页面直接引入就行
![](https://img.haomeiwen.com/i20901775/18c6adb7b1e292aa.png)
第三步:初始化
直接在mounted里面new BScroll出来就可以(不可在created里面,better-scroll绑定的是Dom,created里面Dom还没有挂载),其中第一个参数是需要滚动的大容器的类名或id名(看你心情使用),第二参数是对象,better-scroll默认是禁止用户执行点击等原生事件的,需要将click、tap等设置为true才可使用
![](https://img.haomeiwen.com/i20901775/bdc3e34ae53c91d4.png)
需要注意的:在使用better-scroll时,内容盒子的高度必须大于需要滚动盒子的高度,才能滚动,并且给需要滚动的盒子设置overflow:auto
这样子你便可以享受better-scroll给你带来的如丝般顺滑的感受了!!!
我们经常会遇到这样的需求:点击某个元素让另一个元素滚动到某个位置,这时我们使用better-scroll就再好不过了,他的官方API里给我们提供了scrollToElement,第一个参数是需滚动的盒子类名或id,第二个是执行时间
![](https://img.haomeiwen.com/i20901775/590ce30a5f3cd42b.png)
![](https://img.haomeiwen.com/i20901775/78d0cb49444a4f3c.png)
点击的时候直接用new出来的实例使用这个API就行,轻松加愉快!!!
网友评论