解决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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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代码
2012/09/14 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
简单实现python爬虫功能
2015/12/31 Python
Python中的id()函数指的什么
2017/10/17 Python
python文本数据相似度的度量
2018/03/12 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Django添加feeds功能的示例
2018/08/07 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
Python 实现一个计时器
2020/07/28 Python
成人毕业生自我鉴定
2013/10/18 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
团支部建设方案
2014/05/02 职场文书
运动会演讲稿100字
2014/08/25 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
农村党员对照检查材料
2014/09/24 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
学生自我评语
2015/01/04 职场文书
英语辞职信范文
2015/02/28 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server