对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 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
jquery validation验证表单插件
Jan 07 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
使用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往windows中添加用户
2006/12/06 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
js实现窗口全屏示例详解
2019/09/17 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
用JS实现选项卡
2020/03/23 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python实现的购物车功能示例
2018/02/11 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
用python实现名片管理系统
2020/06/18 Python
对python中list的五种查找方法说明
2020/07/13 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
社区活动邀请函范文
2014/01/29 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js