对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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php for 循环使用的简单实例
2016/06/02 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP实现微信退款功能
2018/10/02 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
Python类的基础入门知识
2008/11/24 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
发展党员工作情况汇报
2014/10/28 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA