去哪儿的项目总结

首先可以来看一下效果图:

![

我们可以把头部封装成组件这里只需要注意组件传值就可以啦

下面给大家说一下这个项目的重点:

轮播图

可以用远程仓库创建分支 index-swiper
同步
本地 git pull
git checkout index-swiper
git status

在github.com 上搜索 vue-awesome-swiper
使用

cnpm install vue-awesome-swiper@2.6.7 --save//下载

使用
import VueAwesomeSwiper from ‘vue-awesome-swiper’
import “swiper/dist/css/swiper.css”
Vue.use(VueAwesomeSwiper)

Better-scroll的使用及字母表布局

www.github.com 上搜找Better-scroll 是基于iscroll的封装 原理

思路 首先获取A字符距离顶部的高度（距离）
然后当在某个位置（所触位置）滑动时距离顶部的高度（距离）
然后计算 在某个位置滑动时距离顶部的高度-取A字符距离顶部的高度 = 当前所触位置与A字符的距离
算出当前是第几个字符 = 当前所触位置与A字符的距离 / 每个字符的高度

防抖节流

函数节流 函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案
函数防抖 debounce
原理：将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次。
滚动scroll事件，不停滑动滚轮会连续触发多次滚动事件，从而调用绑定的回调函数，我们希望当我们停止滚动的时，才触发一次回调，这时可以使用函数防抖。

函数节流 throttle
原理：当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率 假设1ms执行一次（ns） 1s时间执行1000次 让它16ms执行一次

举个栗子：还是以scroll滚动事件来说吧，滚动事件是及其消耗浏览器性能的，不停触发。以我在项目中碰到的问题，移动端通过scroll实现分页，不断滚动，
我们不希望不断发送请求，只有当达到某个条件，比如，距离手机窗口底部150px才发送一个请求，接下来就是展示新页面的请求，不停滚动，如此反复；
这个时候就得用到函数节流。