2.移动端常见特效案例分享-2.插件解决300ms

网络整理 2022-05-13 10:15

2.移动端常见特效案例：返回顶部

步骤：

判断页面的滚动距离是否不超过指定的距离，就会显示按钮。如果没有，按钮将被隐藏。页面的滚动距离是整个页面将向外滚动的距离。规定到达海外酒店部分时会显示按钮，所以滚动距离等于海外酒店部分。到页面顶部的距离设置按钮的点击事件，点击后返回页面顶部

在之前的代码中继续添加：


    // 返回顶部模块
    var goback = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset >= nav.offsetTop) {
            goback.style.display = 'block';
        } else {
            goback.style.display = 'none';
        }
    });
    goback.addEventListener('click', function () {
        window.scroll(0, 0);
    });

2.2点击延迟解决方案

手机点击事件会有300ms的延迟，因为在手机屏幕上双击缩放会缩放页面

也就是说，有些手机页面配备了这样的功能：两点向外滑动会放大屏幕，然后双击屏幕，屏幕大小会恢复到原来的大小。为了知道用户是简单的点击屏幕还是双击，它会为点击事件设置一个300ms的延迟，看用户在300ms内是否点击了两次。如果用户只想点击一次，却等待300ms，不合理

解决方案：

1. 禁用缩放。浏览器禁用默认的双击缩放行为，并移除了 300ms 点击延迟。

 //视口

2.有些页面需要缩放，使用touch事件自己包裹这个事件解决300ms延迟

原理是：

当我们的手指触摸屏幕时网页上标题栏没有了，记录当前的触摸时间当我们的手指离开屏幕时，如果时间小于150ms，并且没有划过屏幕，则从离开的时间中减去触摸时间，那么它被定义为点击

但是第一种方法会导致屏幕无法缩放，第二种方案，代码太长，一次只能解决一个元素的问题

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

3.常用的移动开发插件3.1 什么是插件

移动端需要快速开发，所以我们经常借助一些插件来帮助我们完成操作，什么是插件？

JS插件是一个js文件，按照一定的规范编写，方便程序展示效果，功能具体，调用方便。比如轮播和瀑布插件。

特点：一般是为了解决某个问题而存在的，功能单一，比较小

之前写的animate.js也是一个简单的插件

使用步骤：

1.参考

2.遵循其语法规范（参数等）

3.2 快速点击插件

fastclick 插件解决了 300 毫秒的延迟。使用延迟

GitHub官网地址：

用途：




    
    
    
    Document

3.3 Swiper 插件使用

中文官网地址：

网页上标题栏没有了

1.引入插件相关文件

2.按指定语法使用

步骤：

1.去swiper中文网站下载swiper

2.在文件夹中，在demos文件夹中找到你需要的样式

3.打开你需要的样式，查看源码，看看需要引用哪些相关的文件

4.在文件夹中找到这两个文件来导入项目

5.将轮播部分的html代码引入自己的代码中

6.将轮播部分的css代码引入自己的css中

7.轮播图js代码介绍自己的js

刷机使用：

3.4 Swiper 参数变化1.@ >js

如果是js，查看文档修改

Swiper中文api：

window.addEventListener('load', function () {
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        loop: true,
    });
});

2.css

如果是css，可以通过覆盖原来的样式来改变

3.5 其他手机端常用插件3.6 插件使用总结确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，勾选需要导入的相关文件，导入复制demo实例文件中的结构html、样式css和js代码3.7练习-手机视频插件zy.media .js

4.移动端常用开发框架4.1 框架概述

框架，顾名思义，就是一套架构，会根据自身的特点，为用户提供一套比较完整的解决方案。框架的控制权在于框架本身，用户必须按照框架规定的一定规范进行开发

插件一般是为了解决某个问题而存在的，功能单一且比较少

常用的前端框架有BootStrap、Vue、Angular、React等网页上标题栏没有了，PC端和移动端都可以开发

前端常用的移动插件有swiper、superslide、iscroll等

框架：大而全，一整套解决方案

插件：小而专用，针对某个功能的解决方案

案例：通过 BootStrap 框架实现轮播图片。查看中文文档：导入文件忘记导入css

1.0@>