Giter VIP home page Giter VIP logo

a-z_menu's Introduction

menu

A Vue.js project

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

# 安装
npm install

# 项目运行
npm run dev

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

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

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

实现效果

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

技术点

  • better-scroll 实现城市列表滑动
  • evnetBus总线机制实现兄弟组件通信
  • axios请求城市列表数据
  • stylus实现高效css编写
  • 函数节流减少滑动事件开销

a-z_menu's People

Contributors

hx-dl avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.