用Vue撸一个『A-Z字母滑动检索菜单』

2019年8月22日 236次阅读 来源: 行无忌

近来用vue仿写途牛游览APP 遇到了如许的都市列表挑选页面，花了些时候，用Vue完成了一下并让它体验的靠近 安卓/IOS 原生组件

许多处所都邑有如许的侧边栏字母列表菜单，能够滑动完成内容列表联动。

比方手机通讯录，都市切换页面都邑用到

完成结果

《用Vue撸一个『A-Z字母滑动检索菜单』》

在线体验：http://hx-dl.top/a-z_menu/#/city

手艺点

  • better-scroll 完成都市列表滑动
  • evnetBus总线机制完成兄弟组件通讯
  • axios要求都市列表数据
  • stylus完成高效css编写
  • 函数撙节削减滑动事宜开支

页面构造

页面主要由三个子组件拼装而成

t-header

t-list

t-alphabet

  <div class="city">
    <t-header></t-header>
    <t-list :cities="cities" :hotCities="hotCities"></t-list>
    <t-alphabet :cities="cities"></t-alphabet>
  </div>

t-list，t-alphabet
子组件的完成直接移步项目源码吧，完成比较简单就不贴代码了,有须要的能够直接拿去用，做点小修正即可

源码地点

Github源码

原文地点：行无忌的生长小屋：用Vue撸一个『A-Z字母滑动检索菜单』

    原文作者：行无忌
    原文地址: https://segmentfault.com/a/1190000015969172
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞