对vux点击事件的优化详解

Vux是基于Vue和WeUI的组件库。对于应用vux的项目因为点击绑定的是click事件，自然也存在移动端300ms延迟现象。我们可以用fastclick库来解决这个问题，具体步骤如下：

这里以vue+webpack项目目录为例：

1、打开node控制台，切换到自己的项目目录

2、npm安装fastclick，并将版本信息写入本地packpage.json文件

3、下载成功后，在node_modules目录下可以看见fastclick库文件夹，且在packpage.json文件里可以看见：

4、在src目录下的main.js文件加上语句即可解决延迟问题：

const FastClick = require('fastclick');
FastClick.attach(document.body);

引用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点击事件的优化详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vuex缓存数据并优化自己的vuex-cache

    需求: 请求接口之后,缓存当前接口的数据,下次请求同一接口时拿缓存数据,不再重新请求 添加缓存失效时间 cache使用map来实现 ES6 模块与 CommonJS 模块的差异 CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口. 因为esm输出的是值的引用,直接就是单例模式了 详细 export let cache = new Cache() 版本1 思路: 在vuex注册插件,插件会在每次mutatio

  • 浅谈 Vue 项目优化的方法

    好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style&

  • 对vux点击事件的优化详解

    Vux是基于Vue和WeUI的组件库.对于应用vux的项目因为点击绑定的是click事件,自然也存在移动端300ms延迟现象.我们可以用fastclick库来解决这个问题,具体步骤如下: 这里以vue+webpack项目目录为例: 1.打开node控制台,切换到自己的项目目录 2.npm安装fastclick,并将版本信息写入本地packpage.json文件 3.下载成功后,在node_modules目录下可以看见fastclick库文件夹,且在packpage.json文件里可以看见: 4.

  • Android实现连续点击多次事件的代码详解

    有时候我们需要实现这样的场景,类似进入开发者模式,即多次点击后执行操作. 首先我们先看一个方法: System提供的一个静态方法arraycopy(),我们可以使用它来实现数组之间的复制. public static void arraycopy(Object src,int srcPos,Object dest,int destPos,int length): src:源数组: srcPos:源数组要复制的起始位置: dest:目的数组: destPos:目的数组放置的起始位置: length

  • jQuery中的on与bind绑定事件区别实例详解

    on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data给事件处理函数. fn:该事件被触发时执行的函数. false 值也可以做一个函数的简写,返回false. bind(type,[data],fn) 为每

  • Android 拦截返回键事件的实例详解

    Android 拦截返回键事件的实例详解 KeyEvent类 Android.View.KeyEvent类中定义了一系列的常量和方法,用来描述Android中的 按键事件和返回键有关的常量和方法有. KeyEvent.KEYCODE_BACK: 表示key类型为返回键 KeyEvent.ACTION_DOWN:表示事件为按下key,如果一直按住不放,则会不停产生此事件. KeyEvent.ACTION_UP:表示事件为为放开key,一次点击key过程只会调用一次. public final in

  • 基于js文件加载优化(详解)

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

  • 微信小程序按钮点击跳转页面详解

    微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • Vue优化:常见会导致内存泄漏问题及优化详解

    如果你在用 Vue 开发应用,那么就要当心内存泄漏的问题.这个问题在单页应用 (SPA) 中尤为重要,因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效.因此在vue开发过程中,你需要时刻警惕内存泄漏的问题,这些内存泄漏往往会发生在使用 Vue 之外的其它进行 DOM 操作的三方库时,请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理. 下面是我开发过程中遇到,并查资料总结的内存泄漏问题,会持续更新中

  • MySQL定时任务(EVENT事件)如何配置详解

    MySQL定时任务(EVENT事件)如何配置详解

    一.事件(EVENT)是干什么的   自MySQL5.1.6起,增加了一个非常有特色的功能 - 事件调度器(Event Scheduler),可以用做定时执行某些特定任务(例如:删除记录.数据统计报告.数据备份等等),来取代原先只能由操作系统的计划任务来执行的工作.   值得一提的是MySQL的事件调度器可以精确到每秒钟执行一个任务,而操作系统的计划任务(如:Linux的cron)只能精确到每分钟执行一次.对于一些对数据实时性要求比较高的应用(例如:股票.赔率.比分等)就非常适合.   事件有时

  • Spring的事件机制知识点详解及实例分析

    同步事件和异步事件 同步事件: 在一个线程里,按顺序执行业务,做完一件事再去做下一件事. 异步事件: 在一个线程里,做一个事的同事,可以另起一个新的线程执行另一件事,这样两件事可以同时执行. 用一个例子来解释同步事件和异步事件的使用场景,有时候一段完整的代码逻辑,可能分为几部分,拿最常见的注册来说,假设完整流程是,1.点击注册->2.检验信息并存库->3.发送邮件通知->4.返回给用户.代码这么写是正确,但不是最好的,缺点如下: 逻辑复杂,业务耦合,我们把校验数据并存库和发送邮件写到一个

  • Android View的事件体系教程详解

    Android View的事件体系教程详解

    目录 一.什么是View?什么是ViewGroup? 二.View的位置 三.View的触摸事件 1.MotionEvent 2.TouchSlop 3.VelocityTracker 5.Scroller 四.View的滑动 1)使用Scroll 2)通过动画 3)使用延时策略 五.View的事件分发机制 六.View的滑动冲突问题 View的滑动冲突常见可以简单分为三种: 滑动冲突的处理规则 滑动冲突的解决方法 一.什么是View?什么是ViewGroup? View是Android中所有控

随机推荐