资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/用Vue撸一个『A-Z字母滑动检索菜单』

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

warnerwu / 1465人阅读

摘要：最近用仿写途牛旅行遇到了这样的城市列表选择页面，花了些时间，用实现了一下并让它体验的接近安卓原生组件很多地方都会有这样的侧边栏字母列表菜单，可以滑动实现内容列表联动。

最近用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字母滑动检索菜单』

GPU云服务器 云服务器 js字母滑动索引 横向滑动菜单 弧形滑动菜单 滑动图片菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96846.html

相关文章

  • 干货--手把手撸vue移动UI框架：侧边菜单

    摘要：最后提醒下，代码中使用而非的原因是为了启动移动端手机的动画加速，提升动画流畅度。 前言 最近面试发现很多前端程序员都从来没有写过插件的经验，基本上都是网上百度。所以打算写一系列文章，手把手的教一些没有写过组件的兄弟们如何去写插件。本系列文章都基于VUE，核心内容都一样，会了之后大家可以快速的改写成react、angular或者是小程序等组件。这篇文章是第一篇，写的是一个类似QQ的侧边菜...

    bergwhite 评论0 收藏0

  • 干货--手把手撸vue移动UI框架：滑动轮播

    摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。 前言 昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。 效果展示 老规矩，咱们...

    MSchumi 评论0 收藏0

  • 干货--手把手撸vue移动UI框架： 滑动删除

    摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...

    MkkHou 评论0 收藏0

  • 干货--手把手撸vue移动UI框架： 滑动删除

    摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...

    trigkit4 评论0 收藏0

发表评论

登陆后可评论

0条评论

warnerwu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<