1. 触屏事件
触屏touch事件 | 说明 |
---|---|
touchstart | 手指触摸到一个DOM元素时触发 |
touchmove | 手指在一个DOM元素上滑动时触发 |
touchend | 手指从一个DOM元素上移开时触发 |
1.1 触摸事件对象 TouchEvent
触摸列表 | 说明 |
---|---|
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生了改变的列表,从无到有, 从有到无变化 |
2. 网页特效案例
移动端轮播图,返回顶部
2.1 classList属性
返回元素类名
2.1.1 添加类
element.classlist.add('类名')
2.1.2 移除类
element.classlist.remove('类名')
2.1.3 切换类
element.classlist.toggle('类名')//原先有这个类名,就去除;没有就加上
2.2 click延时解决方案
移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面。
解决方案:
1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="user-scalable=no">
2.利用touch事件自己封装这个事件解决300ms延迟。
原理就是:
1.当我们手指触摸屏幕,记录当前触摸时间
2.当我们手指离开屏幕,用离开的时间减去触摸的时间
3.如果时间小于150ms ,并且没有滑动过屏幕,那么我们就定义为点击//封装tap.解决click 300ms延时 function tap (obj, callback) { var isMover= false; var startTime= 0; //记录触摸时候的时间变量 obj . addEventLi stener (' touchstart', function (e) { startime = Date.now(); //记录触摸时间 }; obj . addEventLi stener (' touchmove', function (e) { isMove = true; // 看看是否有滑动,有滑动算拖拽,不算点击 }); obj . addEventLi stener (' touchend', function (e){ if (!isMove 66 (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms算点击 callback && callback(); //执行回调函数 } isMove = false; // 取反重置 startTime = 0 }); } //调用 tap(div, function(){ // 执行代码});
3.使用插件。fastclick 插件解决300ms延迟。解决页面中所有click的延时问题
网址:https://github.com/ftlabs/fastclick
使用:
<head> <script src="fastclick.js"></script> </head> <body> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } </script> </body>
3. 移动端常用开发插件
3.1 swiper 插件
快速制作页面切换、轮播图效果。
使用:
官方使用说明:https://www.swiper.com.cn/usage/index.html
- 下载swiper压缩包
- 引入相关css、js文件(解压后在dist文件夹里)
- 复制下面的代码,放到需要的位置
<!-- Swiper 最好不要修改类名和结构--> <div class="swiper-container"> <div class="swiper-wrapper"> //Slide1,2,3....可换成需要的图片、内容 <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div>
- 将html的style里的相关的样式(如下)放进css文件li
.swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
- 将下面的代码放进相应页面的js文件里
<script> var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, }); </script>
3.2 其他移动端常见插件
superslide:http://superslide2.com/ 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等
iscroll: https://github.com/cubiq/iscroll
3.3 移动端视频插件
zy.media.js
4.移动端常用框架
4.1 bootstrap
bootstrap中文网:https://www.bootcss.com/
框架里有很多js插件。
所有插件都依赖 jQuery (也就是说,jQuery必须在所有插件之前引入页面)。
5. 本地存储
特性:
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面剧新不失数据
- 容量较大, sessionStorage约5M、 localStorage约20M
- 只能存储字符串,可以将对象JSON.stringify()编码后存储
- 获取本地存储的数据时,使用JSON.parse() 将字符串转换为对象格式
5.1 window.sessionStorage
特性:
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
存储数据:
sessionStorage.setltem(key, value)
获取数据:
sessionStorage. getltem(key)
删除数据:
sessionStorage.removeltem(key)
清空所有的数据(慎用):
sessionStorage.clear()
5.2 window.localStorage
特性:
- 生命周期永久生效,除非手动删除否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
存储数据:
localStorage.setltem(key, value)
获取数据:
localStorage. getltem(key)
删除数据:
localStorage.removeltem(key)
清空所有的数据(慎用):
localStorage.clear()
5.3 案例:记住用户名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>
</body>