欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-06-25 08:07:48|栏目:vue|点击:

移动端解决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实现移动端弹出键盘功能(防止页面fixed布局错乱)

栏    目:vue

下一篇:vue+element实现手机号验证码注册的示例

本文标题:vue移动端如何解决click事件延迟,封装tap等事件

本文地址:http://www.codeinn.net/misctech/205931.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有