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

要将Muiios标题栏上移，需要在编辑器中进行一些简单的修改。Muiios是一个用来创建高端网站的软件，它可以帮助用户快速创建出优雅的网站，用来展示个人的技能、公司的产品或服务。Muiios的标题栏是网站的重要组成部分，它用来显示网站的名称、图标以及链接。

要将Muiios标题栏上移，首先需要在编辑器中找到标题栏的CSS代码，然后将其移动到网页布局中的想要的位置上。可以通过修改顶部margin属性的值来实现标题栏的上移，只需要将margin属性的值设置为负数即可，比如margin-top:-50px; 这样就可以将标题栏上移50像素。

另外，还可以通过调整标题栏的位置属性来上移标题栏。这里的位置属性一般有absolute和relative两种，如果想要标题栏上移，可以将其位置属性设置为relative，同时设置top属性的值为负数即可，比如top:-50px; 。

总之，通过修改CSS代码，就可以实现Muiios标题栏的上移。要记住，在修改CSS代码时，一定要谨慎 *** 作，以免破坏网站的布局，影响网站的整体效果。

MUI后台占用的资源高度依赖于应用的复杂度和使用的技术，如果应用的复杂度较高，使用的技术较多，则其占用的资源自然就会比较高。如果想要降低MUI后台的资源占用，可以考虑优化应用，减少不必要的技术使用，提高代码的运行效率，以及提高应用的稳定性，从而减少资源的浪费。

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