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

最近用vue仿写途牛旅行APP 遇到了这样的城市列表选择页面，花了些时间，用Vue实现了一下并让它体验的接近安卓/IOS 原生组件

很多地方都会有这样的侧边栏字母列表菜单，可以滑动实现内容列表联动。

比如手机通讯录，城市切换页面都会用到

实现效果

在线体验：hx-dl.top/a-z_menu/#/…

技术点

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

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

vsc写vue生成基本代码快捷键_基于vue2.X的webpack基本配置，教你手动撸一个webpack4的配置...
webpack说复杂也不复杂.不复杂,核心概念不外乎是entry, output, loader, plugins.webpack4还新增了optimization选项,用于代码分割和打包优化.现在w ...
撸一个vue的双向绑定
1.前言说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
撸一个聊天室(vue+koa2+websokect+mongodb)
撸一个聊天室(vue+koa2+websokect+mongodb) 本篇博客主要介绍聊天室项目,作者学习vue和node时间较短,若有什么错误或建议,欢迎指出,谢谢~ 贴上源码链接 -> 源码 ...
Vchat — 从头到脚，撸一个社交聊天系统（vue + node + mongodb）
前言项目开始是因为工作需要一个聊天室功能,但是因为某些原因最终选用的是基于xmpp协议的Strophe.js写的.于是就想用node自己写一套,本来只是想简单的写个聊天页面,但是写完了又不满意,所以 ...
给定一个任意的大写字母A~Z，转换为小写字母。
/** 给定一个任意的大写字母A~Z,转换为小写字母.* */ package com.homework;import java.util.*;public class Deom3 {/*** @pa ...
从零开始徒手撸一个vue的toast弹窗组件
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...
手把手教你Vue从零撸一个迷你版MVVM框架
这段时间在工作之余的休息时间,学习了解Vue ,学习Vue的设计思想,通过Vue官网学习Vue的语法,通过Vue前端技术,搭建构建了一个简单的项目,在项目学习完之后,发现Vue是一个很有意思的前端技 ...
C语言编写程序：由键盘输入一个字符判断是字母数字还是其他符号。
c语言程序题编写程序:由键盘输入一个字符判断是字母数字还是其他符号. #include<stdio.h> void main() {char a;scanf("%c" ...
uglifyjs报错 webpack_基于vue2.X的webpack基本配置，教你手动撸一个webpack4的配置
webpack说复杂也不复杂.不复杂,核心概念不外乎是entry, output, loader, plugins.webpack4还新增了optimization选项,用于代码分割和打包优化.现在w ...

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

实现效果

技术点

页面结构

源码地址

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

最新文章

热门文章