vue移动端如何解决click事件延迟,封装tap等事件
短信预约 -IT技能 免费直播动态提醒
移动端解决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 })
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
