对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学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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
DISCUZ 分页代码
2007/01/02 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
教你php如何实现验证码
2016/01/20 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
Python字符串切片操作知识详解
2016/03/28 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python 如何区分return和yield
2020/09/22 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
董事长岗位职责
2013/11/30 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
党委班子剖析材料
2014/08/21 职场文书
北大自主招生自荐信
2015/03/04 职场文书
教师创先争优承诺书
2015/04/27 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers