移动端学习

基础概念

屏幕尺寸

屏幕对角线的长度(一般用英寸来衡量)
在这里插入图片描述

屏幕分辨率

表示屏幕水平和垂直方向的像素数
单位为px,1px=1个像素点。
如:1960*1080,就是宽可放1960个像素点

物理分辨率:像素个数是固定的,这是厂商在出厂时就设置好了的
逻辑分辨率:软件分辨率可以改(网页大小都参考逻辑)

为什么要移动适配:因为不适配网页在移动端默认980px,看不清

高清屏

高清屏(Retain)和普通屏相比,相同区域的物理像素点数,高清屏是普通屏的4倍。

屏幕像素密度PPI:屏幕上每英寸可以显示像素点的数量

在这里插入图片描述

屏幕大小和分辨率是没有关系的,屏幕大的分辨率不一定高

css像素

css像素是个抽象的单位,主要使用在浏览器上,在一个标准的显示密度下,一个css像素对应一个设备像素(物理像素)

物理像素

物理像素又称设备像素,顾名思义,显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色和亮度,使屏幕显示出不同的图像,屏幕从出厂那天,它的物理像素点就固定不变了,单位pt。
买手机的时候会有nxm`的分辨

物理像素与css像素的关系

1个css像素占据多少个物理像素跟屏幕的特性有关,pc端 1个 css像素就占据一个物理像素
2倍高清屏,1个css像素占据4个物理像素

设备独立像素(逻辑像素)

设备独立像素(也叫密度无关像素),通过相关系统转换成物理像素
在这里插入图片描述

像素比dpr

devicePixelRatio = 物理像素/设备独立像素
通过 window.devicePixelRatio 获取
在这里插入图片描述
在这里插入图片描述

一像素问题

因为dpr的像素比都大于1
解决办法
1:scale()
2:initial-scale=0.3333 (全局缩放)
会使像素点变多,影响性能

视口

布局视口

一般移动设备的浏览器都默认设置了一个 viewport 元标签,定义一个虚拟的布局视口(layout viewport)。iOS, Android 默认视口分辨率为 980px。
在这里插入图片描述

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 使用ie最新版进行渲染 -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <!-- 
        width=device-width 宽度=设备宽度,iOS, Android 基本都将这个视口分辨率设置为 980px
        user-scalable=no 禁止用手缩放
        initial-scale=1.0 缩放=1 默认网页打开缩放比例
     -->
如果设置了禁止缩放,还可以缩放就设置最大缩放比和最小缩放比设置为1

在这里插入图片描述

求布局视口宽度:document.documentElement.clientWidth

视觉视口

用户当前看到的区域
在这里插入图片描述

求视觉视口宽度:window.innerWidth

理想视口

显示在理想视口中的网站具有最理想的宽度,用户无需进行缩放,布局视口和可视视口
的宽度一致。

width=device-width

px rem em vw vh

项目 Value
px 正常像素
rem 根据根元素就是HTML元素的字体大小
em 根据父元素元素的字体大小
vw/vh 相对于视口的宽度/高度1vw = 1/100的视口宽度(宽度/3.75vw)100vw=100% 100vh等于屏幕高度
vw适配,统一都用vw/vh
页面宽度/7.5vw
750px/100vw: 80px/?= 10.6666vw

.box{
    
    width:(650/7.5)*1vw
height:(120/7.5)*vw
}

页面初始化

<style>
    header,
    footer,
    section {
      
      
        position: fixed;
        left: 0px;
    }
    header {
      
      
        top: 0px;
        left: 0px;
        right: 0px;
        /* 不写width:100% 写left:0;right:0;使左右等距 */
        background-color: aquamarine;
        height: 60px;
        color: white;
    }
    footer {
      
      
        color: white;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: plum;
        height: 60px;
        width: 100%;
    }
    section {
      
      
        top: 60px;
        left: 0px;
        right: 0px;
        bottom: 60px;
        /*头部和底部留有位置,中间内容部分固定 中间内容可滚动*/
       overflow: hidden;
       /*通过touch事件实现滚动*/
    }
</style>

<body>
    <header> header </header>
    <section>
        <div class="main">
            <p class="p1">这是第几个p01</p>
            <p class="p2">这是第几个p02</p>
            <p class="p3">这是第几个p03</p>
           .....
        </div>
    </section>
    <footer>footer</footer>
</body>

  document.addEventListener('touchstart', move, false);

    function move(e) {
    
    
        var sectionBox = document.querySelector('.main');

        //获取当前触发事件的元素,如果当前触发的元素是section里的就执行
        var e = e || window.event
        // console.log(e.target) //点击的目标 p,div
        // console.log(e.target.nodeName) //目标名字 P,DIV,SECTION
        var _target = e.target

        if (_target.parentNode.nodeName == "SECTION" ||
            _target.parentNode.parentNode.nodeName == "SECTION") {
    
     //如果父元素有section,程序就往下执行
            //获取触摸的坐标,需要在changedTouches对象中取到坐标点
            var x1 = e.changedTouches[0].clientX
            var y1 = e.changedTouches[0].clientY
            
            //touchmove
            //手指移动

            document.addEventListener('touchmove', function () {
    
    }, false);
            document.addEventListener('touchend', function () {
    
    }, false);
        }
    }

移动端调试工具

移动端调试方式
Chrome DevTools 模拟手机调试
vConsole
Charles
Vorlon.JS
Browsersync
终端检测

这里用的:vConsole
https://unpkg.com/[email protected]/dist/vconsole.min.js
可以下载,或者直接网址

<script src="../vconsole.min.js"></script>

<script>
    //创建vconsole对象,用于手机端的调试
    var vConsole = new window.VConsole();
</script>

正常会在右下角有个按钮,点击按钮会有console对话框

在这里插入图片描述

触摸事件

事件名 描述
touchstart: 触摸开始的时候触发
touchmove: 手指在屏幕上滑动的时候触发(即使手指移出了 原来的target 元素,则 touchmove 仍然会被一直触发,而且 target 仍然是原来的 target 元素。)
touchend: 触摸结束的时候触发,手指从触屏设备的边缘移出了触屏设备,也会触发
touchcancel 当系统停止跟踪触摸的时候触发

移动端最好采用事件监听(addEventListener)的方式绑定事件,不会前后覆盖
使用 touchmove 事件一定要做好函数节流,毕竟移动端性能有限

touches、targetTouches和changedTouches

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:发生改变的触摸点,几个手指发生变化

通过一个例子来区分一下触摸事件中的这三个属性:

  1. 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。

  2. 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时,
    targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值,
    为第二个手指的触摸点,因为第二个手指是引发事件的原因

  3. 用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值

  4. 手指滑动时,三个值都会发生变化

  5. 一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。

  6. 手指都离开屏幕之后,touches和targetTouches中将不会再有值,changedTouches还会有一个值,
    此值为最后一个离开屏幕的手指的接触点。

  7. 触点坐标选取(这是重点)

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

window.addEventListener( “touchstart” , function (event){
console.log(event);
})
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
3.touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
  var e=arguments[0]
  e.preventDefault()
}

关于a标签四个伪类在触屏设备中的小技巧:

a标签的四个伪类link,visited,active,hover是专为click事件设计的,所以在触屏网站中尽量不要使用它们

fastclick

fastclick解决方式用touchstart结合touchmove以及touchend替代click事件
zepto的tap会“击穿”页面是由于既响应了自身的tap(也就是touch事件),又没有拦截掉原来的click事件,导致重复执行了2次事件,在有遮罩弹层的时候就会出现“击穿”效果。

事件穿透

在这里插入图片描述

紫色盒子定位在超链接上,点击盒子使紫色盒子消失,这时候会触碰到下面超链接,实现跳转。
pc端不会发生跳转问题

原因是:PC端事件在移动端有300ms的延迟。
因为PC端事件较多,他需要等300ms来判断,如当前是点击事件还是双击事件
移动端touchstart的事件,没有延迟,当我们点击的时候,隐藏掉盒子的同时,直接触发了a标签

为什么会事件点透

tap事件是通过监听绑定document上的touch事件来模拟的,并且tap事件是冒泡到document上才触发的;

touchstart:在这个dom上用手触摸就能开始

click:在这个dom上用手触摸,且手指未曾移动,且在这个dom上手指离开屏幕,且触摸和离开时间很短(有的浏览器可能不检测时间间隔,照样可以触发click),才开始触发。

也就是说在移动端的事件触发从早到晚排序:touchstart touchstop click 。 所以click的触发是有延时的,about 300ms

由于我们在touchstart阶段就已经隐藏了A,当click被触发时,能够被点击的就是B;

解决方法1.取消默认行为event.preventDefault()

{passive: false}:告诉浏览器监听器是否调用preventDefault阻止事件的默认行为

Web开发者通过一个新的属性passive来告诉浏览器,当前页面内注册的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为,以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候,代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,Chrome浏览器称这类型的监听器为被动(passive)监听器。目前Chrome主要利用该特性来优化页面的滑动性能,所以Passive
Event Listeners特性当前仅支持mousewheel/touch相关事件。


    //1.先为document元素添加触摸开始事件,组织页面中所有的元素的默认事件,通过passive事件监听器监听,js事件和默认事件

    var oDiv = document.querySelector('div');
    document.addEventListener('touchstart', function (e) {
    
     //页面全部取消默认事件,给要跳转的添加事件
        e.preventDefault()
    }, {
    
    
        passive: false
    })
    oDiv.addEventListener('touchstart', function (e) {
    
     //移动端会有事件点透,所以要取消默认行为
        this.style.display = 'none'
    }, false)
    var oA = document.querySelectorAll('a')
    for (let i = 0; i < oA.length; i++) {
    
    
        oA[i].addEventListener('touchend', function () {
    
    
            //把浏览器的地址改变成当前触摸元素的链接
            if (this.href) {
    
    
                window.location.href = this.href;
            }
        })
    }
    // oDiv.addEventListener('click', function (e) {//pc端没有这个显现,会正常消失
    //     this.style.display = 'none'
    //     // e.preventDefault()
    // }, false)

解决方法2.fastclick

github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick

$(function(){
 
    newFastClick(document.body);
 
})

使用

$A.on('touchend',function(e){//而touchend是原生的事件,在dom本身上就会被捕获触发
 
    $demo.hide()
    e.preventDefault();
 
})

懒加载和预加载

懒加载

懒加载也就是延迟加载。
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
作用:减轻服务器压力,节约流量,页面加载速度快。
实现方式:
1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。

  <img data-url='show.jpg' src="1.jpg"  >//data-url名字自己定
//img的src属性初始不放置实际需要的链接,而是存在data-url属性中,
//达到某条件后再动态充值src属性值为data-url里的链接地址,实现懒加载。
  
    var imgs=document.getElementsByTagName('img');
    var viewHeight=document.ducumentElement.clientHeight;
    
    // 检测img元素是否在可视区
    function inView (img){
    
    
        var rectObject=document.getBoundingClientRect();
  
        if(rectObject.bottom >= 0 && rectObject.top < viewHeight){
    
    
            return true
        }else{
    
    
            return false
        }
    }
    
    function lazyLoad(arr){
    
    
        for(let i=0;i<arr.length;i++){
    
    
            if(inView(arr[i])){
    
    
                arr[i].src=arr[i].dataset.url;
            }
        }
    }
    
    window.addEventListener('scroll',lazyLoad);
    

1.jquery.lazyload.js

jquery.lazyload.js

2. 响应式图像延迟加载JS插件:lazySizes

添加链接描述
lazySizes.js
github

3. IntersectionObserver 交叉观察

当图片出现在可视区域时,会和可视区域有一个交叉的过程, IntersectionObserver本质上是一个构造函数,它接受两个参数:
第一个参数是回调函数,看见元素了触发一次,看不见了再触发一次,第二个参数是配置对象,不做讲解

 const images = document.querySelectorAll('img')
    const callback = entries => {
    
    
        entries.forEach(entry => {
    
    
            if (entry.isIntersecting) {
    
    
                const image = entry.target
                const data_src = image.getAttribute('data_src');
                image.setAttribute('src', data_src)
                observer.unobserve(image)
            }
        });
    }
    const observer = new IntersectionObserver(callback)
    images.forEach(image => {
    
    
        observer.observe(image)
    })

预加载

提前加载图片,当用户需要查看时是直接从浏览器缓存里取的资源,用户操作体验速度快。
原理:在浏览器加载页面时创建image对象并赋值src链接
作用:让用户有快速的冲浪体验。
缺点:增加服务器压力,首页加载渲染时间长。

预加载的核心要点如下:

1.图片等静态资源在使用之前的提前请求;

2.资源后续使用时可以从缓存中加载,提升用户体验;

3.页面展示的依赖关系维护(必需的资源加载完才可以展示页面,防止白屏等);

实现预加载主要有三个方法:

1.html中img标签最初设置为display:none;

2.js脚本中使用image对象动态创建好图片;

3.使用XMLHttpRequest对象可以更加精细的控制预加载过程,缺点是无法跨域:

   var imgs=['./1.jpg','./2.jpg','./3.jpg'];
   var imgsDom=[];
   
   function preLoad(arr){
    
    
        for(let i=0;i<arr.length;i++){
    
    
            let item=new Image();
            item.src=imgs[i];
            imgsDom.push(item);
        }
   }
   
   window.onload=function(){
    
    
        preLoad(imgs);
   }

区别

懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片,减轻服务器压力。
预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染,增加服务器压力;。

图片抖动

用padding占位,防止网络加载发生抖动

img{
    
    
	height:0px;
	overflow:hidden;
	padding-bottom:45%;(宽/高)
}

初始打开页面需要注意

1.通过pc端打开页面 F12调试切换成移动设备 有显示问题
需要先设置移动设备,再从新打开网页 再F12

移动端适配

如何确定字体大小

设计稿字体大小100px/设备宽度640=要求的字体大小/当前设备宽度
基于640的设计稿,字体大小100px
在页面看html 的font-size大小 以这个大小为基准 每个数都要除一下取如:(50/html字体大小)rem
或者 用vscode插件把font-size更改成自己的html根字号大小

(function(doc,win){
    
    
   //获取html
   var docEl=doc.documentElement,
   //用于获取事件
   //in window 用于查询window的一些事件和方法是否存在orientationchange屏幕翻转
   resizeEvt="orientationchange" in window?"orientationchange":"resize";
   
   function fun(){
    
    
    var w=docEl.clientWidth;
    if(!w) return
    if(w>=640){
    
    
        docEl.style.fontSize='100px'
    }else{
    
    
        docEl.style.fontSize=100 / 640 * w + 'px'
    }
   }
   //如果文档没有addEventListener这方法,就停止执行
   if(!doc.addEventListener)return
   //通过二级事件绑定为window添加resize事件
   win.addEventListener(resizeEvt,fun,false)
   //页面初始化加载的时候也需要获取当前设备宽度,改变字体大小
   //DOMContentLoaded w3c支持的一个事件,因为load事件会在页面所以元素渲染结束后才执行,DOMContentLoaded是在HTML 文档被完全加载和解析完成之后,不用等待图片
   doc.addEventListener('DOMContentLoaded',fun,false)

})(document,window)

节流

一定时间内只执行一次,控制执行次数
(滚动,加载更多,高频点击提交)

function debounce(fun,wait){
    
    
  var flag=true; 
  return function(){
    
    
    if(flag){
    
    
    setTimeout(function(){
    
    
        fun()
        flag=true
      },wait)
      flag=false
    }
  }
}

防抖

当事件频繁触发的时候,只执行最后一次,原理是设置一个定时器,每次点击都要从新计时
(搜索框输入验证,窗口大小resize)

 aBtn.onclick = function(){
    
    
        fn1.call(this)//可以更改this指向
         // fn1()或者直接调用
     }
 var fn1=debounce(function () {
    
    
         console.log(111111)//这里也可以写ajax请求
     }, 1000)
//防抖函数封装
function debounce(fun,wait){
    
    
    var timer=null; 
    return function(){
    
    
        console.log(this)//可以由外面更改this指向
        clearInterval(timer)
        timer=setTimeout(function(){
    
    
          fun()
        },wait)
    }
}

css 优化

  • 尽量避免在HTML标签中使用style属性。( 因为在HTML标签中的style会阻塞页面的渲染 )
  • 避免使用CSS表达式。(因为其执行频率很高,当页面滚动或者鼠标移动的时候,就会执行,这会带来很大的性能损耗)
  • 不滥用float。(float在渲染时计算量比较大,尽量减少使用)。
  • 不声明过多的font-size。(过多的font-size引发CSS树的效率)。
  • 值为0时不需要任何单位。(为了浏览器的兼容性和性能,值为0时不要带单位)。
  • 标准化各种浏览器前缀
    (a)、无前缀应放在最后。
    (b)、CSS动画只用(-webkit-,无前缀)两种即可。
    (c)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。

js 优化

  • 用一个变量保存列表的length的值,避免每次执行的时候到要计算该值。
  • 缓存DOM的选择与计算,避免每次Dom选择都要重新计算。
  • 尽量使用ID选择器,ID选择器是最快的。(因为用id访问时,只要找到元素就停止在DOM上查找;而用其他选择器去查找元素则要对DOM所有节点都访问一遍。)
  • 尽量使用事件代理,避免批量绑定事件。(当网页中需要触发事件的对象比较多的时候,为了避免内存泄漏,我们把事件委托到其父对象上,借助事件冒泡机制,可以将事件委托到body,document等元素上,这样等于一个页面就只有一个事件触发,避免直接把事件添加到多个对象上)
  • touch事件优化,使用touchstart、touchend代替click。(响应速度快,但应注意touch响应过快,易引发误操作)。

减少重绘和回流

(a)、避免不必要的DOM操作
(b)、尽量改变Class而不是Style,使用classList代替className
(c)、避免使用document.write
(d)、减少drawImage

渲染过程

  1. dom 树 由dom节点组成
  2. css树 css规则树
  3. render树 将dom和css结合
  4. layout树 计算每个点的位置
  5. painting 绘制遍历render

重绘

当你给一个元素更换颜色,这样的行为是不会影响页面布局的,DOM树不会变化,但颜色变了,渲染树得重新渲染页面,这就是重汇。

重排==回流

我们增删DOM节点,修改一个元素的宽高,页面布局发生变化,DOM树结构发生变化,那么肯定要重新构建DOM树,而DOM树与渲染树是紧密相连的,DOM树构建完,渲染树也会随之对页面进行再次渲染,这个过程就叫回流。
1.DOM的增删行为
比如你要删除某个节点,给某个父元素增加子元素,这类操作都会引起回流。如果要加多个子元素,最好使用documentfragment。
2.几何属性的变化
比如元素宽高变了,border变了,字体大小变了,这种直接会引起页面布局变化的操作也会引起回流。如果你要改变多个属性,最好将这些属性定义在一个class中,直接修改class名,这样只用引起一次回流。
3.元素位置的变化
修改一个元素的左右margin,padding之类的操作,所以在做元素位移的动画,不要更改margin之类的属性,使用定位脱离文档流后改变位置会更好。

4.获取元素的偏移量属性
例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性,浏览器为了保证值的正确也会回流取得最新的值,所以如果你要多次操作,最取完做个缓存。

5.页面初次渲染
这样的回流无法避免

6.浏览器窗口尺寸改变
resize事件发生也会引起回流。

回流必然会造成重绘,但重绘不一定会造成回流。

Less

使用方法

1.考拉Koala

2.vscode插件easy less

 "less.compile": {
    "compress": false, // true => remove surplus whitespace是否压缩
    "sourceMap": false, // true是否生成map文件,有了这个可以在调试台看到less行数
    "out": "${workspaceRoot}\\css\\",
    "outExt": ".css", // 输出文件的后缀,小程序可以写'wxss'
  },

3.引入less文件

<link type="text/css" href="1.less"/>
使用live server打开

请添加图片描述

请添加图片描述

swiper插件

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

1.引入

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">    
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"> </script>
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在Swiper容器之外

<script>        
  var mySwiper = new Swiper ('.swiper', {
      
      
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      
      
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      
      
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      
      
      el: '.swiper-scrollbar',
    },
  })        
  </script>

Swiper Animate使用方法

1.需要引入swiper.animate.min.js和animate.min.css文件

<script> 
//Swiper5
  var mySwiper = new Swiper ('.swiper-container', {
      
      
    on:{
      
      
      init: function(){
      
      
        swiperAnimateCache(this); //隐藏动画元素 
        swiperAnimate(this); //初始化完成开始动画
      }, 
      slideChangeTransitionEnd: function(){
      
       
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
        //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名
      } 
    }
  }) 
  </script>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>

zepto和jq的区别

zepto jq
更加轻便,用哪个引入那个 功能丰富,轻量级的类库
Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),Zepto是不支持IE浏览器的。

zepto的tap和click的区别:

;(function($){
  
})(Zepto)

两者都会在点击时触发,但是在web手机端,clikc会有200-300ms的延时,所以要用tap代替click作为点击事件,singleTap和doubleTap分别作为单次点击和双击,但是使用tap会带来点透事件(事件穿透)。

better-scroll 滚动插件

iscroll 移动端滚动插件

添加链接描述

使用js

<script src="https://unpkg.com/@better-scroll/[email protected]/dist/core.min.js"></script>
//示例html代码:
<div id="wrapper" style="overflow:hidden;height:400px;">
	<tag></tag>
</div>
//示例js代码:
<script>
	let wrapper = document.getElementById("wrapper")
	let bs = new BScroll(wrapper, {
      
      })
</script> 

下拉刷新
<script>
	let wrapper = document.getElementById("wrapper")
	let bs = BetterScroll.createBScroll(wrapper, {
      
      
	pullDownRefresh:{
      
      
	  threshold: 10,
	  stop: 20
	}
	})
	//下拉刷新..
	bs.on('pullingDown',function(e){
      
      
	        console.log('要开始下拉刷新了')
	        bs.finishPullDown();        //注意完成刷新之后一定要调用此方法,否则下次下拉刷新无效
	})
</script>
上拉加载
<script>
	let wrapper = document.getElementById("wrapper")
	let bs = BetterScroll.createBScroll(wrapper, {
	        pullUpLoad: {
	                threshold: 50
	        }
	})
	//上拉加载..
	bs.on('pullingUp',function(e){
	        console.log('要开始上拉加载了')
	        bs.finishPullUp();    //加载完成需要调用此方法,否则下次上拉加载无效
	})
<script>
回到顶部
<button onclick="gotop()">回到顶部</button>
//示例js代码:
function gotop(){
        bs.scrollTo(0,0)
}

移动端适配方法

1.使用js文件获取屏幕宽度

(function(doc,win){
    
    
   //获取html
   var docEl=doc.documentElement,
   //用于获取事件
   //in window 用于查询window的一些事件和方法是否存在orientationchange屏幕翻转
   resizeEvt="orientationchange" in window?"orientationchange":"resize";
   
   function fun(){
    
    
    var w=docEl.clientWidth;
    if(!w) return
    if(w>=750){
    
    
        docEl.style.fontSize='100px'
    }else{
    
    
        docEl.style.fontSize=100 /750* w + 'px'
    }
   }
   //如果文档没有addEventListener这方法,就停止执行
   if(!doc.addEventListener)return
   //通过二级事件绑定为window添加resize事件
   win.addEventListener(resizeEvt,fun,false)
   //页面初始化加载的时候也需要获取当前设备宽度,改变字体大小
   //DOMContentLoaded w3c支持的一个事件,因为load事件会在页面所以元素渲染结束后才执行,DOMContentLoaded是在HTML 文档被完全加载和解析完成之后,不用等待图片
   doc.addEventListener('DOMContentLoaded',fun,false)

})(document,window)
1.js中 750px宽时,字体大小100
2.引入js后,打开页面,看html在375宽时,字体大小,应该是50(通过js计算出来的)
3.以50为基准除以50

2.使用less,@fontSize:(100vw/750px)*100px;

@fontSize:(100vw/750px)*100px;
html{
    
    
    font-size: @fontSize;
}
在px->rem vscode插件里设置字体大小50,这里less计算完是50px,用宽/50求出rem

3.使用flexible.js

flexible.js

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
 .box {
    
    
    /*设计稿是375px的 把w=68 h=29转换成rem单位  所以thml字号是37.5 用68/37.5 */
    /* width: 1.813rem;
    height: 0.773rem;
    background: pink; */
    /* 设计稿的750px的,根字号是75 200/75 ,在375屏幕上显示就是100*100 */
    width: 2.666rem;
    height: 2.666rem;
    background: pink;
  }

4.使用vw,vh

@vw:(375/100);375px分成100份一份3.75
.box{
    
    
宽/3.75 
width:(100/@vw)*1vw;
height:(100/@vw)*1vw;
background-color: bisque;
}

猜你喜欢

转载自blog.csdn.net/weixin_51109349/article/details/124590828
今日推荐