解决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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
解决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
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php实现每日签到功能
2018/11/29 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python实现哈希表
2014/02/07 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python正则简单实例分析
2017/03/21 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python函数中的可变长参数详解
2019/09/12 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
项目工作说明书
2014/07/29 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
Python进度条的使用
2021/05/17 Python