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

Posted 2023-03-20

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

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

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

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

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

（3）离开手指touchend：

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

1.常用插件

（1）fastclick解决300ms延迟

(2)Swipper

(3)superslide

(4)iscroll

(5)zy.media.js视频插件

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的体验。