[JS]M端适配

触摸事件

移动端有自己独特的地方, 比如触摸事件(touch), android和IOS都有

1. touchstart 手指触摸到元素时触发
2. touchmove 手指在元素上滑动时触发
3. touchend 手指在元素上移开时触发

触摸事件对象: 描述手指在触摸屏幕的状态的变化.

1. touches: 正在触摸屏幕的所有手指的一个列表.
2. targetTouches: 正在触摸当前元素上的手指的一个列表
3. changedTouches: 手指状态发生了改变的列表,从无到有,从有到无.
4. 手指移动会触发滚动屏幕,所以需要阻止默认的屏幕滚动 e.preventDefault()

swiper插件

网址: 马柯施迈_生活小助手CON.CN - 电脑手机都能用的上网导航

学习插件:

1,确认插件实现的功能

2,去官网查看使用说明

3,下载插件

4,打开demo实例文件,查看需要引入的相关文件

5,复制demo实例中的结构样式和js

插件使用

1. 引入相关文件,先引入swiper.js,再引入自己的js文件
2. 按照固定语法使用,(复制结构,样式和js,调用js)
3. 相关更改:js的话就在官网手册里查找相关属性修改,如果是css就自己写样式覆盖

其他插件

superslide: SuperSlideTouchSlide官方网站

iscroll: GitHub - cubiq/iscroll: Smooth scrolling for the web

zy.media.js: 移动端视频插件, 可以实现不同浏览器视频样式的一致化

点击延迟

由于移动端支持双击方法窗口的功能, 造成了点击延迟300ms的问题

方法1:

user-scalable=no; //对于不需要窗口放大的项目,直接禁止,就可以解决问题

方法2:

官网: https://github.com/fylabs/fastclick

作用: fastclick用来解决移动端300ms延迟问题, 用于需要窗口放大的项目

使用:

1, <script src="fastclick.js"></script> //引入文件

2, if ('addEventListener' in document) {

document.addEventListener('DOMContentLoaded', function() {

FastClick.attach(document.body);

}, false);

} //复制调用函数

3,后面的代码正常写即可