vue移动端怎么解决click事件延迟,封装tap等事件

小编给大家分享一下vue移动端怎么解决click事件延迟,封装tap等事件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

移动端解决click事件延迟,封装tap等事件

下载vue-touch.js

引入：

<script class="lazy" data-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" class="lazy" data-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" class="lazy" data-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" class="lazy" data-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" class="lazy" data-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等事件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！