乘风原创程序

  • vue移动端如何解决click事件延迟,封装tap等事件
  • 2022/3/28 17:49:29
  • 移动端解决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 })
    ? },

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。