对vux点击事件的优化详解


Posted in Javascript onAugust 28, 2018

Vux是基于Vue和WeUI的组件库。对于应用vux的项目因为点击绑定的是click事件,自然也存在移动端300ms延迟现象。我们可以用fastclick库来解决这个问题,具体步骤如下:

这里以vue+webpack项目目录为例:

对vux点击事件的优化详解

1、打开node控制台,切换到自己的项目目录

对vux点击事件的优化详解

2、npm安装fastclick,并将版本信息写入本地packpage.json文件

对vux点击事件的优化详解

3、下载成功后,在node_modules目录下可以看见fastclick库文件夹,且在packpage.json文件里可以看见:

对vux点击事件的优化详解

4、在src目录下的main.js文件加上语句即可解决延迟问题:

const FastClick = require('fastclick');
FastClick.attach(document.body);

对vux点击事件的优化详解

引用fastclick的场景不一定是在vue+webpack项目结构下,还有其他的引入场景:

直接script引入fastclick.js文件并调用内置方法

<script type='application/javascript' src='./src/fastclick.js'></script>

<script>
if ('addEventListener' in document) {
 document.addEventListener('DOMContentLoaded', function() {
  FastClick.attach(document.body);
 }, false);
}

// 如果有引入jquery库,还可以这样:
$(function() {
 FastClick.attach(document.body);
});
</script>

更多的引入场景及具体引入方法请参见fastclick

以上这篇对vux点击事件的优化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 #Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 #Javascript
AngularJS 事件发布机制
Aug 28 #Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 #Javascript
对vue事件的延迟执行实例讲解
Aug 28 #Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 #Javascript
You might like
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python算术运算符实例详解
2017/05/31 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
医学生自荐信
2013/12/03 职场文书
阳光体育活动方案
2014/02/16 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
西式婚礼主持词
2014/03/13 职场文书
环保宣传标语
2014/06/12 职场文书
市场营销计划书
2015/01/17 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫