解决Vue 移动端点击出现300毫秒延迟的问题


Posted in Javascript onJuly 21, 2020

1. 安装模块

cnpm install fastclick -S

2. 在main.js中引入,并绑定到body

import FastClick from 'fastclick'

FastClick.attach(document.body);

当better-scroll和 fastclick冲突的不能点击的时候:

<slider>
  <div v-for="item in recommends">
  <a :href="item.linkUrl" rel="external nofollow" >
   <!-- 当better-scroll和 fastclick冲突的不能点击的时候,只需要加上class="needsclick",图片就可以被点击了,解决冲突的问题 -->
   <img class="needsclick" @load="loadImage" :src="item.picUrl">
  </a>
  </div>
</slider>

补充知识:@types/fastclick在vue+ts中的使用

1、在使用了ts的vue项目中,以往直接安装fastclick不能正常使用,根据提示执行下面命令就好了

cnpm i @types/fastclick

2、找到node-modules下面的@types/fastclick/index.d.ts文件,然后打开修改里面内容即可

在这里插入代码片declare module "fastclick" {
 // function fastclick(layer: any, options?: FastClickOptions): FastClickObject;
 // namespace fastclick {
 // var FastClick: FastClickStatic;
 // }这里注释的代码删掉
 var FastClick: FastClickStatic;//改成这行代码
 export = FastClick;
}

main.ts里面按照以往的配置就好了

import FastClick from 'fastclick';

FastClick.attach(document.body);

以上这篇解决Vue 移动端点击出现300毫秒延迟的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JS中Array数组学习总结
Jan 18 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 #Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 #Javascript
vue 清空input标签 中file的值操作
Jul 21 #Javascript
Vue-resource安装过程及使用方法解析
Jul 21 #Javascript
vue中destroyed方法的使用说明
Jul 21 #Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 #Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 #Javascript
You might like
PHPMailer安装方法及简单实例
2008/11/25 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
用javascript实现自定义标签
2007/05/08 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
Vue实现简易计算器
2020/02/25 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python实现K最近邻算法
2018/01/29 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
口头翻译求职人自荐信
2013/12/07 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
事业单位请假制度
2014/01/13 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
个人授权委托书范本
2014/04/03 职场文书
计生专干事迹
2014/05/28 职场文书
公务员检讨书
2014/11/01 职场文书
劳模事迹材料范文
2014/12/24 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
老干部座谈会主持词
2015/07/03 职场文书
Python实现双向链表
2022/05/25 Python