vue移動端怎么解決click事件延遲,封裝tap等事件

小編給大家分享一下vue移動端怎么解決click事件延遲,封裝tap等事件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

移動端解決click事件延遲,封裝tap等事件

下載vue-touch.js

引入：

<script src="js/vue-touch.js" type="text/javascript" charset="utf-8"></script>

導航條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}">養車知識</li>
                    <li v-tap="{fn:vueTouch,active:2}" :class="{'activezixun':active===2}">愛車保養</li>
                    <li v-tap="{fn:vueTouch,active:3}" :class="{'activezixun':active===3}">汽車維修</li>
                </ul>
            </div>

tab對應的列表頁：

<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萬公里的車，相當于人的多少歲別在“黃金車齡”把車賣了</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>
			<!--養車知識-->
			<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">其實疲勞駕駛也是有預防措施的，汽車上有</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>
            <!--愛車保養-->
            <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">停車后直接就熄火下車？老司機告訴 你：發動機至少折壽5年！</p>
                        <p class="items-jianjie"><span class="jianjie-one">在停車熄火之前隨手多做一步，能讓把發動</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">隨著汽車市場的不斷發展車子的保有量也不斷</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，默認它會阻止touch事件。所以在配置中需要加上click: true

例：

import BScroll from 'better-scroll'
mounted() {
    this.scroll = new BScroll(this.$refs.search, {mouseWheel: true, click: true, tap: true })
  },

以上是“vue移動端怎么解決click事件延遲,封裝tap等事件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！