一,触屏事件
1.触屏touch事件
2.触摸事件对象
如果侦听的是一个DOM元素,他俩是一样的
如果手指离开了,不能侦听到前两者,能侦听到第三个
我们一般都是触摸元素,所以一般都是第二个比较常用
第一个:屏幕 第二个:DOM即div
3.移动拖拽元素
移动端拖动原理:盒子原来位置+手指移动位置
手指移动距离:手指滑动中的位置-原来触摸的位置
二,移动端常见特效
1.classlist属性
返回元素类名
可以在元素中添加删除和切换类名
类名前面是不需要‘.’的,
没有就给你加上,有就给你删了
2.click延时解决方案
三,移动端常见插件
js插件就是js文件
先把文件引入,在按照语法要求进行使用,记得把代码复制一遍。
1.swiper插件使用
网址:Swiper演示 - Swiper中文网
把结构,样式都复制一份粘贴一下,再把js和css的部分代码引入
使用方法:
首先加载插件,需要的文件有swiper-bundle.min.js和swiper-bundle.min.css文件
添加HTML内容。Swiper7的默认容器是'.swiper',Swiper6之前是'.swiper-container'。
还可以给.swiper添加一个大小
如果作为CommonJs 或ES 模块引入
//CommonJs var Swiper = require('swiper');
var mySwiper = new Swiper('.swiper', { /* ... */ });
//ES import Swiper from 'swiper';
var mySwiper = new Swiper('.swiper', { /* ... */ });
2.插件使用总结
四,移动端常用开发框架
五,本地存储
是把信息存储在浏览器里面的
方便对信息的读取和设置,甚至页面刷新数据也不丢失
1.window.sessionStorage存储
生命周期:关闭页面窗口
在同一个窗口下的数据可以使用
以键对式来进行数据的储存
2.window.localStorage
生命周期永久生效,关闭页面它也存在
可以多窗口共享
也是以键值对的形式储存