摘要：最近用仿写途牛旅行遇到了这样的城市列表选择页面，花了些时间，用实现了一下并让它体验的接近安卓原生组件很多地方都会有这样的侧边栏字母列表菜单，可以滑动实现内容列表联动。
最近用vue仿写途牛旅行APP 遇到了这样的城市列表选择页面，花了些时间，用Vue实现了一下并让它体验的接近 安卓/IOS 原生组件
很多地方都会有这样的侧边栏字母列表菜单，可以滑动实现内容列表联动。
比如手机通讯录，城市切换页面都会用到
实现效果在线体验：http://hx-dl.top/a-z_menu/#/city
技术点better-scroll 实现城市列表滑动
evnetBus总线机制实现兄弟组件通信
axios请求城市列表数据
stylus实现高效css编写
函数节流减少滑动事件开销
页面结构页面主要由三个子组件拼装而成
t-header
t-list
t-alphabet
t-list，t-alphabet
子组件的实现直接移步项目源码吧，实现比较简单就不贴代码了,有需要的可以直接拿去用，做点小修改即可
Github源码
原文地址：行无忌的成长小屋：用Vue撸一个『A-Z字母滑动检索菜单』
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96846.html
摘要：最后提醒下，代码中使用而非的原因是为了启动移动端手机的动画加速，提升动画流畅度。 前言 最近面试发现很多前端程序员都从来没有写过插件的经验，基本上都是网上百度。所以打算写一系列文章，手把手的教一些没有写过组件的兄弟们如何去写插件。本系列文章都基于VUE，核心内容都一样，会了之后大家可以快速的改写成react、angular或者是小程序等组件。这篇文章是第一篇，写的是一个类似QQ的侧边菜...
摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。 前言 昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。 效果展示 老规矩，咱们...
摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。 前言 昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。 效果展示 老规矩，咱们...
摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...
摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...
阅读 3326·2023-04-26 02:07
阅读 1525·2021-11-15 11:38
阅读 2744·2021-09-22 15:55
阅读 2369·2021-07-26 23:38
阅读 2983·2019-08-29 15:16
阅读 1882·2019-08-29 11:16
阅读 1620·2019-08-29 11:00
阅读 3268·2019-08-26 18:36
