vue 一个简单的项目 之二 城市选择页面 step4

上篇,我们实现了城市列表的样式,屏蔽了浏览器的滑动,同时,在子元素中没有设置滑动。本篇我们来设置一个友好的滑动与字母表的布局。

我们使用第三方包 BetterScroll 

地址:https://github.com/ustbhuangyi/better-scroll

先,在项目里下载进来

npm install better-scroll --save

然后可以重启服务器使用了

根据官网给出的介绍,如下。

    vue 一个简单的项目 之二 城市选择页面 step4_第1张图片

我们要调整一下我们的元素结构,加一层 content 类。

然后,使用这个插件,官方示例

    vue 一个简单的项目 之二 城市选择页面 step4_第2张图片

借助 ref ,我们可以获得dom 元素.