对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构造函数和原型对象
Sep 23 Javascript
node.js超时timeout详解
Nov 26 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
JS运算符简单用法示例
Jan 19 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遍历数组的几种方法
2012/03/22 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Django实现内容缓存实例方法
2020/06/30 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
体育教师自我鉴定
2014/02/12 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
实习证明格式范文
2014/10/14 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
工程主管竞聘书
2015/09/15 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL