解决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 相关文章推荐
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
js数组去重的方法总结
2019/01/18 Javascript
vue实现拖拽效果
2019/12/23 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python批量下载抖音视频
2019/06/17 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python库安装速度过慢解决方案
2020/07/14 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
车间统计员岗位职责
2014/01/05 职场文书
出国考察邀请函
2014/01/21 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2014年电厂工作总结
2014/12/04 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL