對(duì)vux點(diǎn)擊事件的優(yōu)化詳解
Vux是基于Vue和WeUI的組件庫(kù)。對(duì)于應(yīng)用vux的項(xiàng)目因?yàn)辄c(diǎn)擊綁定的是click事件，自然也存在移動(dòng)端300ms延遲現(xiàn)象。我們可以用fastclick庫(kù)來(lái)解決這個(gè)問(wèn)題，具體步驟如下：
這里以vue+webpack項(xiàng)目目錄為例：
1、打開(kāi)node控制臺(tái)，切換到自己的項(xiàng)目目錄
2、npm安裝fastclick，并將版本信息寫(xiě)入本地packpage.json文件
3、下載成功后，在node_modules目錄下可以看見(jiàn)fastclick庫(kù)文件夾，且在packpage.json文件里可以看見(jiàn)：
4、在src目錄下的main.js文件加上語(yǔ)句即可解決延遲問(wèn)題：
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庫(kù)，還可以這樣：
$(function() {
FastClick.attach(document.body);
});
</script>
更多的引入場(chǎng)景及具體引入方法請(qǐng)參見(jiàn)fastclick。
以上這篇對(duì)vux點(diǎn)擊事件的優(yōu)化詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue之keepAlive使用案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue?keep-alive的實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue?keep-alive的實(shí)現(xiàn)原理分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue3中使用vue3-print-nb實(shí)現(xiàn)前端打印功能
在前端開(kāi)發(fā)中,經(jīng)常需要打印頁(yè)面的特定部分,比如客戶列表或商品詳情頁(yè),要快速實(shí)現(xiàn)這些功能,可以使用 vue3-print-nb 插件,本文就給大家介紹了如何在 Vue 3 中使用 vue3-print-nb 實(shí)現(xiàn)靈活的前端打印,需要的朋友可以參考下2024-06-06
vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了Vue混入使用和選項(xiàng)合并，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
vue數(shù)據(jù)對(duì)象length屬性未定義問(wèn)題
這篇文章主要介紹了vue數(shù)據(jù)對(duì)象length屬性未定義問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
electron踩坑之remote of undefined的解決
這篇文章主要介紹了electron踩坑之remote of undefined的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決
這篇文章主要介紹了Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)拖拽改變列表順序的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
Vue2為何能通過(guò)this訪問(wèn)到data與methods的屬性
這篇文章主要介紹了Vue2為何能通過(guò)this訪問(wèn)到data與methods的屬性，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09