vue移動(dòng)端如何解決click事件延遲,封裝tap等事件
更新時(shí)間：2022年03月28日 08:51:42 作者：狗蛋*
這篇文章主要介紹了vue移動(dòng)端如何解決click事件延遲，封裝tap等事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
移動(dòng)端解決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)車(chē)知識(shí)</li>
? ? ? ? ? ? ? ? ? ? <li v-tap="{fn:vueTouch,active:2}" :class="{'activezixun':active===2}">愛(ài)車(chē)保養(yǎng)</li>
? ? ? ? ? ? ? ? ? ? <li v-tap="{fn:vueTouch,active:3}" :class="{'activezixun':active===3}">汽車(chē)維修</li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>tab對(duì)應(yīng)的列表頁(yè)：
<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萬(wàn)公里的車(chē)，相當(dāng)于人的多少歲別在“黃金車(chē)齡”把車(chē)賣(mài)了</p>
<p class="items-jianjie"><span class="jianjie-one">對(duì)于一輛車(chē)來(lái)說(shuō)，它在正常情況下可供時(shí)間</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)車(chē)知識(shí)-->
<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">開(kāi)車(chē)是累了記得打開(kāi)“防疲勞按鍵”， 有人直到車(chē)子報(bào)廢也沒(méi)有開(kāi)過(guò)</p>
<p class="items-jianjie"><span class="jianjie-one">其實(shí)疲勞駕駛也是有預(yù)防措施的，汽車(chē)上有</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>
<!--愛(ài)車(chē)保養(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">停車(chē)后直接就熄火下車(chē)？老司機(jī)告訴 你：發(fā)動(dòng)機(jī)至少折壽5年！</p>
<p class="items-jianjie"><span class="jianjie-one">在停車(chē)熄火之前隨手多做一步，能讓把發(fā)動(dòng)</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>
<!--汽車(chē)維修-->
<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">這些地方的螺絲被動(dòng)過(guò)，說(shuō)明你買(mǎi)的是 事故車(chē)，一定要注意了</p>
<p class="items-jianjie"><span class="jianjie-one">隨著汽車(chē)市場(chǎng)的不斷發(fā)展車(chē)子的保有量也不斷</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;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })移動(dòng)端click事件失效
可能是你使用了better-scroll，默認(rèn)它會(huì)阻止touch事件。所以在配置中需要加上click: true
例：
import BScroll from 'better-scroll'
mounted() {
? ? this.scroll = new BScroll(this.$refs.search, {mouseWheel: true, click: true, tap: true })
? },以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue 項(xiàng)目如何引入微信sdk接口的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
uni-app是一個(gè)使用Vue.js開(kāi)發(fā)的多端開(kāi)發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于uni-app?vue3接口請(qǐng)求封裝的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue移動(dòng)端時(shí)彈出側(cè)邊抽屜菜單效果
這篇文章主要介紹了vue移動(dòng)端時(shí)彈出側(cè)邊抽屜菜單,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue嵌套組件傳參實(shí)例分享，本文以一個(gè)vue遞歸組件為例，探究多層嵌套后事件無(wú)法觸發(fā)的問(wèn)題，我們可以通過(guò)查看一Demo，便于快速了解，下文列舉例子需要的小伙伴可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中Table組件Select的勾選和取消勾選事件詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
Vue中保存用戶(hù)登錄狀態(tài)實(shí)例代碼
本篇文章主要介紹了Vue中保存用戶(hù)登錄狀態(tài)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。、2017-06-06
這篇文章主要介紹了vue下使用fullcalendar及簡(jiǎn)單案例,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08