對(duì)vux點(diǎn)擊事件的優(yōu)化詳解

發(fā)布時(shí)間：2020-10-19 10:23:17 來(lái)源：腳本之家閱讀：193 作者：草木黃塵欄目：web開發(fā)

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è)問題，具體步驟如下：

這里以vue+webpack項(xiàng)目目錄為例：

1、打開node控制臺(tái)，切換到自己的項(xiàng)目目錄

對(duì)vux點(diǎn)擊事件的優(yōu)化詳解

2、npm安裝fastclick，并將版本信息寫入本地packpage.json文件

對(duì)vux點(diǎn)擊事件的優(yōu)化詳解

3、下載成功后，在node_modules目錄下可以看見fastclick庫(kù)文件夾，且在packpage.json文件里可以看見：

對(duì)vux點(diǎn)擊事件的優(yōu)化詳解

4、在src目錄下的main.js文件加上語(yǔ)句即可解決延遲問題：

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

對(duì)vux點(diǎn)擊事件的優(yōu)化詳解

引用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)參見fastclick。

以上這篇對(duì)vux點(diǎn)擊事件的優(yōu)化詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

對(duì)vux點(diǎn)擊事件的優(yōu)化詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽