對(duì)vux點(diǎn)擊事件的優(yōu)化詳解
Vux是基于Vue和WeUI的組件庫。對(duì)于應(yīng)用vux的項(xiàng)目因?yàn)辄c(diǎn)擊綁定的是click事件,自然也存在移動(dòng)端300ms延遲現(xiàn)象。我們可以用fastclick庫來解決這個(gè)問題,具體步驟如下:
這里以vue+webpack項(xiàng)目目錄為例:
1、打開node控制臺(tái),切換到自己的項(xiàng)目目錄
2、npm安裝fastclick,并將版本信息寫入本地packpage.json文件
3、下載成功后,在node_modules目錄下可以看見fastclick庫文件夾,且在packpage.json文件里可以看見:
4、在src目錄下的main.js文件加上語句即可解決延遲問題:
const FastClick = require('fastclick'); FastClick.attach(document.body);
引用fastclick的場(chǎng)景不一定是在vue+webpack項(xiàng)目結(jié)構(gòu)下,還有其他的引入場(chǎng)景:
直接script引入fastclick.js文件并調(diào)用內(nèi)置方法
<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>
更多的引入場(chǎng)景及具體引入方法請(qǐng)參見fastclick。
以上這篇對(duì)vux點(diǎn)擊事件的優(yōu)化詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟
這篇文章主要給大家介紹了關(guān)于如何快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09vue router總結(jié) $router和$route及router與 router與route區(qū)別
這篇文章主要介紹了vue router總結(jié) $router和$route及router與 router與route區(qū)別,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07Vue3?中路由Vue?Router?的使用實(shí)例詳解
vue-router是vue.js官方給出的路由解決方案,能夠輕松的管理SPA項(xiàng)目中組件的切換,這篇文章主要介紹了Vue3?中路由Vue?Router?的使用,需要的朋友可以參考下2023-02-02vue動(dòng)態(tài)禁用控件綁定disable的例子
今天小編就為大家分享一篇vue動(dòng)態(tài)禁用控件綁定disable的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁面分享其他頁面)
這篇文章主要介紹了vue微信分享,在當(dāng)前頁面分享其他頁面,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue3導(dǎo)航欄組件封裝的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09