对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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
js 动态校验开始结束时间的实现代码
May 25 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
一个显示天气预报的程序
2006/10/09 PHP
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
javascript验证身份证号
2015/03/03 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
Django框架表单操作实例分析
2019/11/04 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python实现双人五子棋(终端版)
2020/12/30 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
入党自荐书范文
2014/03/09 职场文书
捐助倡议书范文
2014/04/15 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
导游词之吉林花园山
2019/10/17 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Python序列化与反序列化相关知识总结
2021/06/08 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android