vue移動端如何解決click事件延遲,封裝tap等事件
更新時間：2022年03月28日 08:51:42 作者：狗蛋*
這篇文章主要介紹了vue移動端如何解決click事件延遲，封裝tap等事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
移動端解決click事件延遲,封裝tap等事件
下載vue-touch.js
引入：
<script src="js/vue-touch.js" type="text/javascript" charset="utf-8"></script>
導(dǎo)航條tab：
<div>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li v-tap="{fn:vueTouch,active:0}" :class="{'activezixun':active===0}">全部</li>
? ? ? ? ? ? ? ? ? ? <li v-tap="{fn:vueTouch,active:1}" :class="{'activezixun':active===1}">養(yǎng)車知識</li>
? ? ? ? ? ? ? ? ? ? <li v-tap="{fn:vueTouch,active:2}" :class="{'activezixun':active===2}">愛車保養(yǎng)</li>
? ? ? ? ? ? ? ? ? ? <li v-tap="{fn:vueTouch,active:3}" :class="{'activezixun':active===3}">汽車維修</li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>tab對應(yīng)的列表頁：
<div class="zixunQuanbu" v-show="active===0">
<div class="items">
<a href="zixunItems1.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img class="items-img" src="img/zixun1.png"/>
<p class="items-title">跑了10萬公里的車，相當(dāng)于人的多少歲別在“黃金車齡”把車賣了</p>
<p class="items-jianjie"><span class="jianjie-one">對于一輛車來說，它在正常情況下可供時間</span></p>
<p class="items-time">2019-04-20 <span class="mui-icon iconfont iconyanjing"></span><span class="liulanliang">1265</span></p>
</a>
</div>
</div>
<!--養(yǎng)車知識-->
<div class="zixunQuanbu" v-show="active===1">
<div class="items">
<a href="zixunItems1.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img class="items-img" src="img/zixun2.png"/>
<p class="items-title">開車是累了記得打開“防疲勞按鍵”， 有人直到車子報廢也沒有開過</p>
<p class="items-jianjie"><span class="jianjie-one">其實(shí)疲勞駕駛也是有預(yù)防措施的，汽車上有</span></p>
<p class="items-time">2019-03-20 <span class="mui-icon iconfont iconyanjing"></span><span class="liulanliang">1265</span></p>
</a>
</div>
</div>
<!--愛車保養(yǎng)-->
<div class="zixunQuanbu" v-show="active===2">
<div class="items">
<a href="zixunItems1.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img class="items-img" src="img/zixun3.png"/>
<p class="items-title">停車后直接就熄火下車？老司機(jī)告訴 你：發(fā)動機(jī)至少折壽5年！</p>
<p class="items-jianjie"><span class="jianjie-one">在停車熄火之前隨手多做一步，能讓把發(fā)動</span></p>
<p class="items-time">2019-02-20 <span class="mui-icon iconfont iconyanjing"></span><span class="liulanliang">1265</span></p>
</a>
</div>
</div>
<!--汽車維修-->
<div class="zixunQuanbu" v-show="active===3">
<div class="items">
<a href="zixunItems1.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img class="items-img" src="img/zixun4.png"/>
<p class="items-title">這些地方的螺絲被動過，說明你買的是 事故車，一定要注意了</p>
<p class="items-jianjie"><span class="jianjie-one">隨著汽車市場的不斷發(fā)展車子的保有量也不斷</span></p>
<p class="items-time">2019-03-20 <span class="mui-icon iconfont iconyanjing"></span><span class="liulanliang">1265</span></p>
</a>
</div>
</div>vue.js:
var vm = new Vue({
? ? ? ? ? ? ? ? el: '#zixunClass',
? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? "active": 0
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? ? ? vueTouch:function(a){
? ? ? ? ? ? ? ? ? ? ? ? this.active=a.active;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })移動端click事件失效
可能是你使用了better-scroll，默認(rèn)它會阻止touch事件。所以在配置中需要加上click: true
例：
import BScroll from 'better-scroll'
mounted() {
? ? this.scroll = new BScroll(this.$refs.search, {mouseWheel: true, click: true, tap: true })
? },以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶自動吸附功能的懸浮球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue項(xiàng)目打包后怎樣優(yōu)雅的解決跨域,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue+el-menu實(shí)現(xiàn)菜單欄無限多層級分類
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實(shí)現(xiàn)菜單欄無限多層級分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
markRaw是將一個對象標(biāo)記為普通對象,而toRaw是將reactive對象變?yōu)槠胀▽ο?在 Vue 3 中,markRaw 是一個用于告訴 Vue 的響應(yīng)性系統(tǒng)不要對某個對象進(jìn)行轉(zhuǎn)換或追蹤其響應(yīng)性的函數(shù),下面給大家介紹vue3中markRaw詳解,感興趣的朋友一起看看吧2024-04-04
Vue中使用provide和inject實(shí)例對比分析
這篇文章主要為大家介紹了Vue中使用provide和inject實(shí)例對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了Vue3 全局使用按鈕截流指令示例代碼,Vue2與Vue3中的自定義指令實(shí)現(xiàn)方式略有不同，但實(shí)現(xiàn)的按鈕截流功能是類似的，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue怎樣獲取當(dāng)前時間,并且傳遞給后端(不用注解)
這篇文章主要介紹了vue怎樣獲得當(dāng)前時間,并且傳遞給后端(不用注解)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue Router中獲取路由傳遞過來的參數(shù)(方法詳解)
在VueRouter中,可以通過動態(tài)路由匹配和查詢參數(shù)`query`來傳遞參數(shù),并將路由參數(shù)或查詢參數(shù)作為組件的`props`傳遞,動態(tài)路由匹配使用`route.params`訪問參數(shù),查詢參數(shù)使用`route.query`訪問,本文給大家介紹Vue Router中獲取路由傳遞過來的參數(shù),感興趣的朋友一起看看吧2025-02-02
這篇文章主要為大家詳細(xì)介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10