首先可以来看一下效果图:
![
我们可以把头部封装成组件这里只需要注意组件传值就可以啦
下面给大家说一下这个项目的重点:
轮播图
可以用远程仓库创建分支 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)
![](https://i-blog.csdnimg.cn/blog_migrate/ad7cd3c0e41798472e10089d9dba62ee.jpeg)
Better-scroll的使用及字母表布局
www.github.com 上搜找Better-scroll 是基于iscroll的封装 原理
思路 首先获取A字符距离顶部的高度(距离)
然后当在某个位置(所触位置)滑动时距离顶部的高度(距离)
然后计算 在某个位置滑动时距离顶部的高度-取A字符距离顶部的高度 = 当前所触位置与A字符的距离
算出当前是第几个字符 = 当前所触位置与A字符的距离 / 每个字符的高度
防抖节流
函数节流 函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案
函数防抖 debounce
原理:将若干函数调用合成为一次,并在给定时间过去之后,或者连续事件完全触发完成之后,调用一次。
滚动scroll事件,不停滑动滚轮会连续触发多次滚动事件,从而调用绑定的回调函数,我们希望当我们停止滚动的时,才触发一次回调,这时可以使用函数防抖。
函数节流 throttle
原理:当达到了一定的时间间隔就会执行一次;可以理解为是缩减执行频率 假设1ms执行一次(ns) 1s时间执行1000次 让它16ms执行一次
举个栗子:还是以scroll滚动事件来说吧,滚动事件是及其消耗浏览器性能的,不停触发。以我在项目中碰到的问题,移动端通过scroll实现分页,不断滚动,
我们不希望不断发送请求,只有当达到某个条件,比如,距离手机窗口底部150px才发送一个请求,接下来就是展示新页面的请求,不停滚动,如此反复;
这个时候就得用到函数节流。