1.首先呢,我们去gitHub上面找一个Better-scroll库,我跟着Dell老师找的下面这一版。
2.进入到命令行,在当前分支下安装better-scroll
npm install better-scroll --save
3.Better-scroll常用的HTML结构
4.接下来就要在项目中使用它啦
初始化代码如下:
import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')
项目中具体初始化代码如下图:
- js部分代码
- template部分代码
其中,最外层list容器是better-scroll的作用对象,为了能正常使用滚动功能,我们在所有area容器的最外层增加了一层div,因此滚动的部分就是我们这个DIV中的元素了。
这里为什么要采用ref
属性呢,因为better-scroll 提供了一个类,实例化的第一个参数是一个原生的 DOM 对象。而ref属性可以帮我们获取到DOM对象。
- 最终效果图