vue实现城市列表选择功能

前端之家收集整理的这篇文章主要介绍了vue实现城市列表选择功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

成果展示

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

准备工作:

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

功能分析

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

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

3.实现搜索城市

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

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

//头部 //搜索 //城市列表 //A-Z

创建搜索组件页面,接受父组件传递的数据,引入better-scroll第三方插件,实现列表滚动

  • 搜索到匹配的数据
  • 创建城市列表组件,引入better-scroll插件,实现列表滚动,通过watch监听letter,实现字母与城市列表滚动

      {{listInner.name}}

    总结

    以上所述是小编给大家介绍的vue实现城市列表选择功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/vue/31498.html

    猜你在找的Vue相关文章