對(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)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樓層跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟
這篇文章主要給大家介紹了關(guān)于如何快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
vue router總結(jié) $router和$route及router與 router與route區(qū)別
這篇文章主要介紹了vue router總結(jié) $router和$route及router與 router與route區(qū)別，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
Vue3?中路由Vue?Router?的使用實(shí)例詳解
vue-router是vue.js官方給出的路由解決方案，能夠輕松的管理SPA項(xiàng)目中組件的切換，這篇文章主要介紹了Vue3?中路由Vue?Router?的使用,需要的朋友可以參考下2023-02-02
vue動(dòng)態(tài)禁用控件綁定disable的例子
今天小編就為大家分享一篇vue動(dòng)態(tài)禁用控件綁定disable的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了Element PageHeader頁(yè)頭的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁(yè)面分享其他頁(yè)面)
這篇文章主要介紹了vue微信分享，在當(dāng)前頁(yè)面分享其他頁(yè)面，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue3導(dǎo)航欄組件封裝的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫(kù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite
Vue3的確可以直接使用tsx開(kāi)發(fā),唯一需要處理的就是children,而且處理起來(lái)還是比較不爽的,下面這篇文章主要給大家介紹了關(guān)于TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite的相關(guān)資料,需要的朋友可以參考下2022-08-08