大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的探索之旅吧!

一、touch事件的缺陷

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

但是呢,touch 事件并不是完美的,不管是我们自己封装的 tap 事件,还是 zepto 自带的 tap 事件,在移动端都有一个致命的缺陷,就是“点透”。

什么是“点透”呢?

假如有两个盒子,盒子A和盒子B,如果盒子A在盒子B的上面,当我们使用 tap 事件点击盒子A的时候,盒子B会触发 click 事件,这就是点透。

触发这两个事件的顺序是 tap 事件,然后是 click 事件。因为 tap 事件内部是 touch 事件处理的,而 touch 事件是先于 click 事件触发的。

这个时候,我们既想无延时,又不想触发点透效果,而且有的时候,我们希望我们的网页不仅可以在移动端访问,在 PC 模式下也可以访问,但是 tap 事件只能在移动端使用,所以只能用 click 事件,但是 click 又有延时,怎么办呢?

我们知道, touch 事件只能在移动端使用,这个我们无法改变,所以我们只能改变延时的问题,于是我们就引入了 "fastclick.js" 库文件,解决 click 的延时问题。

使用方式:

1、引入 fastclick.js 文件。

2、在 script 中加入以下函数:

原生 js 的话,加入:

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
// document.body 表示整个body下的所有元素都是用fastclick效果,可以修改。
FastClick.attach(document.body);
}, false);
}

jQuery 或 Zepto 的话:

$(function() {
FastClick.attach(document.body);
});

3、正常使用 元素.addEventListener("click", function(){}) 或者 元素.on("click", function(){}) ,来使用改装过后的 click 事件,这个 click 事件没有延时。

二、移动端的一些常用插件

见识到 fastclick 插件的好处之后,我们就挖掘出了更多好用的插件,可以大大提高我们开发的效率。

1、iScroll

以下为官方介绍:

iScroll是一个高性能,资源占用少,无依赖,多平台的 javascript 滚动 插件。

它可以在桌面,移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错,iScroll可以在此基础上提供更多不可思议的功能。具体来说:

细粒度控制滚动位置,甚至在滚动过程中。你总是可以获取和设置滚动器的x,y坐标。

动画可以使用用户自定义的擦出功能(反弹'bounce',弹性'elastic',回退'back',...)。

你可以很容易的挂靠大量的自定义事件(onBeforeScrollStart, *

开箱即用的多平台支持。从很老的安卓设备到最新的iPhone,从Chrome浏览器到IE浏览器。

使用方式:

1、希望你的结构如下,但是不限定标签(下面的 ul 可以改为 div,li 可以改为 p 等,不限定标签类型)。

<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>

2、在 script 标签中初始化 iScroll。

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

如果是 jQuery 的话更简单了,一句话:

var myScroll = new IScroll(".wrapper");

3、如果想实现像滚轮,显示滚动条等效果,可以在初始化的时候,将这些需求作为对象,填入第二个参数中,比如,增加滚轮上下滚动操作和显示滚动条的效果:

var myScroll = new IScroll(".wrapper", {
mouseWheel: true, // 使用滚轮
scrollbars: true // 显示滚动条
});

如此简单三步操作,就可以轻松实现你想要的功能。

2、swipe

swipe.js 是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常作为轮播图使用。

使用方法:

1、引入 swipe.js 文件

2、希望你的 html 结构为(不限定标签名称):

<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>

3、对其格式进行设定(固定写法,最好不要修改,当然类名称需要修改)

.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}

3、在 script 中进行初始化操作:

window.mySwipe = Swipe(document.getElementById('slider'));

4、如果你想要自动轮播,滑动等操作,需要在初始化的第二个参数中,引入一个对象,比如:

window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2, // 默认显示第二张图片
speed: 400, // 过渡400ms
auto: 3000, // 轮播间隔 2s
continuous: true, // 循环轮播(默认开启)
disableScroll: false, // 禁止滑动(默认关闭)
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});

5、当然你还可以在 PC 上使用左右两个按钮来上一张下一张翻页。swipe 会提供 next() , prev() 等函数来实现上一张下一张翻页。比如:

document.getElementById('btn1').onclick = function(){
window.mySwipe.prev(); // 调用系统的prev()方法
}; document.getElementById('btn2').onclick = function(){
window.mySwipe.next(); // 调用系统的next()方法
};

3、swiper

swiper 与 swipe 类似,都可以提供轮播触摸滑动的效果,只不过 swiper 能够提供的特效更多,更加炫酷,相应的体积也更大。

使用说明: 参考链接:http://www.swiper.com.cn/usage/index.html

需要注意的是,swiper 不同于 swipe,它也是结构固定,不限标签的,唯一的区别是类样式的名称是不可改变的。因为它引入了库文件的 css 样式。所以最好不要改变类样式的名称。具体的内容可以参考官网,有很多详细的使用说明和特效演示。

临时Tips:overflow:hidden 可以让子元素浮动的父盒子由高度为0,到自动伸缩。

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件的更多相关文章

  1. 【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

  2. 移动端touch事件实现页面弹动--小插件

    动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...

  3. 从零开始学ios开发(十五):Navigation Controllers and Table Views(中)

    这篇内容我们继续上一篇的例子接着做下去,为其再添加3个table view的例子,有了之前的基础,学习下面的例子会变得很简单,很多东西都是举一反三,稍稍有些不同的内容,好了,闲话少说,开始这次的学习. ...

  4. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  5. 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. 从零开始学 Web 之 DOM(五)元素的创建

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  7. 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 Vue.js(五)Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 JavaScript(五)面向对象

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. Linux命令列内容

    命令列内容: 一般模式 移动光标 [ctrl]+[f] 屏幕[向前]移动一页 [ctrl]+[b] 屏幕[向后]移动一页 0 这是数字0:移动到这一行的最前面字符处 $ 移动到这一行的最后面字符处 G ...

  2. 【Selenium】【BugList3】firefox与Selenium版本不兼容,报: Message: Unsupported Marionette protocol version 2, required 3

    环境信息:Windows7 64位 + python 3.6.5 + selenium 3.11.0 +pyCharm 1 #coding=utf-8 2 from selenium import w ...

  3. UVa 11481 Arrange the Numbers (组合数学)

    题意:给定 n,m,k,问你在 1 ~ n 的排列中,前 m 个恰好有 k 个不在自己位置的排列有多少个. 析:枚举 m+1 ~ n 中有多少个恰好在自己位置,这个是C(n-m, i),然后前面选出 ...

  4. powershell ParameterSet解析

    自定义PowerShell函数,在设置参数的时候中,可以将参数设置为某些情况下可选,某些条件下又设置为必选. 示例代码从网站复制的. function Connect-Somewhere { [Cmd ...

  5. 解决eclipse运行内存溢出方案

    1.在工具栏找到Window -> Preference 2.双击选择的jdk 3.在VM输入以下设置运行的内存的大小即可(具体内存大小可以根据项目进行设置) -Xms800m -Xmx800m ...

  6. Android 开发工具方法整理

    1. 获取当前手机系统语言 Locale.getDefault().getLanguage(); 2. 获取当前手机系统版本号 android.os.Build.VERSION.RELEASE; 3. ...

  7. MySQL体系结构和存储引擎概述

     MySQL体系结构和存储引擎概述 一.定义数据库和实例 数据库: 物理操作系统文件或其他形式文件类型的集合.数据库文件可以是frm.MYD.ibd 结尾的文件. 从概念上来说,数据库是文件的集合,是 ...

  8. Windows 系统 IP 和端口的相关检测命令

    查看本机IP地址 查看自己电脑的ip,使用 ipconfig 命令 ipconfig 检测指定IP是否联通 检测某个ip是否可以连通,直接使用 ping 命令 ping 219.148.111.212 ...

  9. 第一阶段:Java内功秘籍-线性表

    前言 为什么要学习数据结构与算法,如果你学会了做安卓,javaweb,前端等,都是你的武功秘籍,但是如果你的内功不够好,再厉害的功夫也是白费. 数据结构和算法:什么是数据结构,什么是数据,在计算机内部 ...

  10. LabVIEW(十三):同一个控件的输入和输出转换

    1.实现功能:读取某些文件的数据并将这些数据显示在一个界面上,对界面上的数据进行修改后,将修改后的数据保存到源文件中. 2.显示功能: 程序框图右键>文件I/O>读取分隔符电子表格> ...