对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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jQuery实现checkbox全选的方法
2015/06/10 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python脚本开机自启的实现方法
2019/06/28 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Python 求向量的余弦值操作
2021/03/04 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
JPA面试常见问题
2016/11/14 面试题
《锄禾》教学反思
2014/04/08 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
六查六看自查报告
2014/10/14 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
公诉意见书范文
2015/06/05 职场文书
入党转正申请书范文
2019/05/20 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby