154需要携程的静态界面
P156-164 插件的使用 以及制作
- 本地存储导读
第一章
- 触屏事件
- 移动端常见特效
- 移动端常用开发插件
- 移动端常用开发框架
1-1 触屏事件
触屏事件概述
- 移动端浏览器兼容性好,无需考虑JS兼容性
- 移动端的独特: 触屏事件touch (也称触摸事件),Android和IOS都有
touch对象代表一个触摸点, 触摸点可能是一个手指,一根笔
触屏事件可响应用户手指(或触摸笔)对屏幕或者触控板操作
触屏touch事件(TouchEvent) 说明 touchstart(mousedown) 手指触摸到一个DOM元素时触发 touchmove(mouse) 手指在一个DOM元素上滑动时触发 touchend(mouseup) 手指从一个DOM元素上移开时触发
触摸事件对象重点我们看三个常见对象列表:
触摸列表 说明 touches 正在触摸屏幕的所有手指的一个列表 targetTouches 正在触摸当前DOM元素上的手指的一个列表 changedTouches 手指状态发生了改变的列表,从无到有,从有到变化 因为平时我们都是给元素注册触摸事件, 所以重点记住 targetTouches
移动端拖动元素
- touchstart 、touchmove 、 touchend可以实现拖动元素
- 但是拖动元素需要当前手指的坐标值, 可以使用targetTouches[0]里面的pageX和pageY
- 移动端拖动的原理 : 手指移动中, 计算手指移动的距离,然后用盒子原来的位置 + 手指移动的距离
- 手指移动的距离 :手指滑动中的位置 减去 手指刚开始触摸的位置
拖动三部曲 :
- 触摸元素touchstart : 获取手指初始坐标, 同时获得盒子原来的位置
- 移动手指touchmove : 计算手指的滑动距离,并且移动盒子
- 离开手指touchend
<div></div> <script> var div = document.querySelector('div'); var startX = 0; var startY = 0; var x = 0; // 获得盒子原来的位置 var y = 0; div.addEventListener("touchstart", function(e) { startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); //阻止屏幕滚动的默认行为 }); </script>
1-2 移动端click事件300ms延时问题解决
移动端click事件会有300ms的延时, 原因是移动端屏幕双击会缩放(double tap to zoom)
解决方案 :
禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
<meta name="viewport" content="user-scalable=no">
利用touch事件对自己封装这个事件解决300ms延迟
- 当我们手指触摸屏幕,记录当前触摸时间
- 当我们手指离开屏幕,用离开的时间减去触摸的时间
- 如果时间小于150ms,并且没有滑动过屏幕,那么我们就定义为点击
fastclick插件使用
- js插件就是js文件
1-3 swiper
- swiper
- 引入插件相关文件
- 按照规定语法使用