vue实现城市列表选择功能
发布时间:2020-12-17 02:57:08 所属栏目:百科 来源:网络整理
导读:成果展示 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细介绍 准备工作: 引入axios插件,调用better-scrol
成果展示最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细介绍 准备工作:引入axios插件,调用better-scroll第三方插件,本地json文件,可以参考目录中的city.json,有条件的也可以自己去扒 功能分析1.获取json数据展示城市列表 。 2.侧边字母定位滚动到相应的位置。 3.实现搜索城市 接下来我们开始对组件进行划分:本次案例中,总共划分为五个组件,下面就是组件的划分图 创建city组件,通过父组件获取数据,传递给子组件 //头部
创建搜索组件页面,接受父组件传递的数据,引入better-scroll第三方插件,实现列表滚动 创建字母组件,点击字母,左边列表城市想对应,通过 |