vue2.5去哪儿项目城市选择页——Better-scroll的使用

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对象。

• 最终效果图