1. 创建分支city-list
把线上的分支拉到本地：git pull，然后切换到这个分支上：git checkout city-list，最后重启服务器：cnpm run dev。
2. 创建List组件并在City组件中引用注册使用。
3. 分析布局，建三个区域，并加一像素边框：
4. css
一像素边框的颜色不是太清楚，改动一下颜色：
5. 三个部分
- 当前城市
样式：
发生了塌陷，我们在布局的时候经常会遇到这个问题，当给子元素设置浮动后，父元素的高度会发生塌陷，也就是说父元素的高度变为0，解决这个问题，我们只要把父元素变成一个BFC（块级格式化上下文）就可以了，常用的办法是给父元素设置overflow：hidden：
这样就显示正常了。
调整样式，设置padding：.1rem 0，同时设置border-radius: .06rem：
多复制几个button部分：
最终要实现右图的效果，我们需要在右侧预留大约30像素的距离，来设置根据首字母查询城市，所以要给button-list右边一个0.6rem的padding值： - 热门城市
复制当前城市div内容改为热门城市： - 首字母
设置样式：
效果：
然后多复制几个区块：
Bug：
这时发现是可以上下“拉动的”，是因为没有设置overflow：hidden，多出去的部分会撑出去；
解决：
为标签list设计样式：
List将空间都占满了，需要设置样式让他让出城市选择部分：
想要撑出的区域隐藏，给list加上设置：overflow:hidden。就出现了不能拖动的list区域：
6. Better-scroll的使用及字母表布局
-
better-scroll是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。在这个模块中我们要实现字母表的滚动：
- 在GitHub上搜索
better-scroll第三方包，安装better-scroll： - 重启服务器，到官网看使用说明：
注意：better-scroll应用于wrapper，滚动部分是content。Better-scroll只处理wrapper的第一个子元素content的滚动，这意味着将忽略其他元素。 - 根据better-scroll结构要求，修改我们的模板，在三个area最外层增加一层div：
- 使用规则，首先要引入
better-scroll，然后创建一个better-scroll的实例，这个实例接收一个dom元素（wrapper）：
还记得我们操作dom需要借助什么吗？利用ref，其可以帮助我们获取dom： - 然后在逻辑部分引入
better-scroll，并利用mounted函数，它会在页面挂载完后自动执行，这样就能够实现按住页面滑动的效果了：
- 右侧字母表的实现
- 在
components里创建一个组件Alphabet.vue，并在City组件中引用，对该子组件进行布局的修改：Display：flex；flex-direction：column；justify-content：center。这三行语句使字母垂直居中。其中justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。这里需要了解flex布局，见http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool。使文字水平方向上居中，并设置颜色：
7. 提交到线上