话说又学到移动端了,真的让我有点头疼了...真的很麻烦啊!!但是没办法,硬着头皮学吧.
学习目标:
触屏事件概述:
移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS的书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android和 iOS都有.
touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可相应用户手指(或触控笔),对屏幕或者触控板操作
常见的触屏事件如下:
试着写一下,切换成模拟手机调试
再来试试触摸滑动事件
再来试试最后一个:
表演一个摸完就走:
只要我的手指离开,就是touchend
触摸事件对象(TouchEvent)
TouchEvent是一类描述手指在触摸平面(触摸屏,触摸板)的状态变化的事件.这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,比如多少个手指在点击.
touchstart/touchmove/touchend都有各自的事件对象.
我们先来看看触摸事件的对象吧:
可以看到有很多很多的属性:
但是我们现阶段只要了解三个就好了:
我来测试一下第一个:
很可惜我们谷歌浏览器只能模拟一只手指头触摸,length就代表有几根手指在屏幕上触摸
再来看看最后一个:
当我们触摸结束时,touches和targetTouches都是0,只有changedTouches是有变化的,因为它可以记录从有到无和从无到有
这三个中的重点是: targetTouches
我们用targetTouches包含着一个数组,里面包含的是每根手指的各种属性和信息,targetTouches[0]可以看到第一个手指的一些属性:
网页拖动元素我们已经学会了,手机也能拖动元素,我们现在要学习一下:
但是我们还要注意,触摸滑动是有默认的屏幕滚动的,就是说本来我只想拖动盒子,但是 整个页面都滚动起来了.
所以这时候我们要阻止这个默认行为.在touchmove里加上一句话就OK啦.
接下来做移动端的轮播图案例:
先搭建结构,虽然用的是以前的携程的案例,但我还是单独在页面中写吧,不然很麻烦.
但是和PC端有点不同,我们不仅要把第一张图片在最后克隆一张,原本的最后那张也要放最前面才行.
因为是移动端,所以可以使用CSS3的一些方法:
这样移动的话ul就不用加定位了
现在试做一下:
后面接着做无缝滚动
因为是ul在做过渡效果,所以我们给ul添加一个监听事件:
我们让他过渡完成后就打印一个11
往左划也一样,但是现在还没做拖动效果
下面要做小圆点跟随图片变化的效果,也引出了新的知识点:
classList属性
classList属性是HTML5新增的一个属性,返回元素的类名.但是ie10以上的版本才支持(但是移动端不用担心,没有兼容性的问题).
该属性用于在元素中添加,移除及切换CSS类.有以下方法:
添加类:
element.classList.add('类名'); (注意类名不需要加'.')
移除类:
element.classList.remove('类名') (注意类名不需要加'.')
切换类:
element.classList.toggle('类名') (注意类名不需要加'.')
这个方法用于检查元素是否有某个 class。如果 class 不存在，则为元素添加该 class；如果 class 已经存在，则为元素删除该 class。
小bug: 有时候我们的切换成别的页面再回来的时候,轮播图自己就会跑出去很远很远,因为他一直在前进,这个时候我们将判断条件的'=='改为'>='即可.
那么如何让小圆圈跟随着图片变化呢>
我们能用上我们新学的办法了.
接下来就是手指滑动轮播图的部分:
移动也做好了,但是我们平常手机里的轮播图的滑动效果并不是这样的,而是当我们滑动很小距离时,图片会回弹回去,滑动的距离大了才会下一张,所以我们要根据moveX添加判断条件.
基本上就是这个样子了...真的好累啊,先休息吧...
但其实还是有很多bug...比如滑动着就消失了的小圆点,图片滑动到最后返回时还是没衔接上,但是太累了.明天复盘一次
