对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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 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
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
php实现文章评论系统
2019/02/18 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Win8下python3.5.1安装教程
2020/07/29 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
支部书记四风问题自我剖析材料
2014/09/29 职场文书
六一活动主持词
2015/06/30 职场文书