20.【Web API】——移动端网页特效（2020-09-13）

1touchstart、touchmove、touchend可以实现拖动元素2但是拖动元素需要当前手指的坐标值我们可以使用targetTouchest[0]里面的pageX和pageY

3移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离

4手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：

（1）触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置

（2）移动手指touchmove：计算手播的滑动距离，并且移动盒子

（3）离开手指touchend：

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动epreventDefault（）；

1常用插件

（1）fastclick解决300ms延迟

(2)Swipper

(3)superslide

(4)iscroll

(5)zymediajs视频插件

2插件使用

（1）引入js插件文件；

（2）按照规定语法使用；

classList属性是HTML5新增的一个属性，返回元素的类名，但是ie10以上版本支持。

该属性用于在元素中添加，移除及切换CSS类。有以下方法

移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放（double tap to zoom）页面。

解决方案：

（1）禁用缩放，浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟；

（2）利用touch事件自己封装这个事件解决300ms延迟。

原理就是：

1当我们手指触摸屏幕，记录当前触摸时间

2当我们手指离开屏幕，用离开的时间减去触摸的时间

3如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

（3）使用插件。fastclick 插件解决300ms延迟

框架，顾名思义就是一套架构，它会基于自身的特点向用户提供套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

前端常用的框架有Bootstrap、Vue、Angular等。

Bootstrap是一个简洁、直观、强保的前端开发框架，它让web 开发更迅速、简单。

它能开发PC端，也能开发移动端

BootstrapJS插件使用步骤：

1引入相关s文件

2复制HTML结构

3修改对应样式

4修改相应JS参数

MUI是一个专门用于做手机APP的前端框架。

MUI的UI设计理念是：以IOS为基础，补充Android平台特有的控件。因此MUI封装的控件，UI上更符合app的体验。

点击ul中的li元素，点击失效，有时只有点击li元素的左侧才生效。

解决办法：mui有自带的点击事件绑定

本来是需要这样的，结果点击无响应

换成以下就可以了，$("top-menu-list") 为本来的事件源的父级,此父级需要是一开始就存在的dom结构，而非动态添加

如果是 a 点击无效，用以下方法试试

以上就是关于20.【Web API】——移动端网页特效（2020-09-13）全部的内容，包括:20.【Web API】——移动端网页特效（2020-09-13）、mui点击事件失效、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！