@H_5020@

成果展示

@H502_0@最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍

<p style="text-align: center">

@H_5020@

准备工作：

@H502_0@　引入axios插件，调用better-scroll第三方插件，本地json文件，可以参考目录中的city.json,有条件的也可以自己去扒

@H_502_0@

功能分析

@H_502_0@1.获取json数据展示城市列表 。

@H_5020@2.侧边字母定位滚动到相应的位置。

@H502_0@3.实现搜索城市

@H_502_0@接下来我们开始对组件进行划分：本次案例中，总共划分为五个组件，下面就是组件的划分图

<p style="text-align: center">

@H_502_0@创建city组件，通过父组件获取数据，传递给子组件

<div class="jb51code">
<pre class="brush:js;">