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

 更新时间:2022年03月28日 08:51:42   作者:狗蛋*  
这篇文章主要介绍了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 })
  },

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

相关文章

  • Pinia中action使用方法详解

    Pinia中action使用方法详解

    Pinia是Vue的存储库,它允许您跨组件/页面共享状态,下面这篇文章主要给大家介绍了Pinia中action使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue实现带自动吸附功能的悬浮球

    vue实现带自动吸附功能的悬浮球

    这篇文章主要为大家详细介绍了vue实现带自动吸附功能的悬浮球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue项目打包后怎样优雅的解决跨域

    vue项目打包后怎样优雅的解决跨域

    这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue+el-menu实现菜单栏无限多层级分类

    vue+el-menu实现菜单栏无限多层级分类

    这篇文章主要为大家详细介绍了vue+el-menu实现菜单栏无限多层级分类,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3中markRaw示例详解

    vue3中markRaw示例详解

    markRaw是将一个对象标记为普通对象,而toRaw是将reactive对象变为普通对象,在 Vue 3 中,markRaw 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数,下面给大家介绍vue3中markRaw详解,感兴趣的朋友一起看看吧
    2024-04-04
  • Vue中使用provide和inject实例对比分析

    Vue中使用provide和inject实例对比分析

    这篇文章主要为大家介绍了Vue中使用provide和inject实例对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue3 全局使用按钮截流指令示例代码

    Vue3 全局使用按钮截流指令示例代码

    这篇文章主要介绍了Vue3 全局使用按钮截流指令示例代码,Vue2与Vue3中的自定义指令实现方式略有不同,但实现的按钮截流功能是类似的,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue怎样获取当前时间,并且传递给后端(不用注解)

    vue怎样获取当前时间,并且传递给后端(不用注解)

    这篇文章主要介绍了vue怎样获得当前时间,并且传递给后端(不用注解)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue Router中获取路由传递过来的参数(方法详解)

    Vue Router中获取路由传递过来的参数(方法详解)

    在VueRouter中,可以通过动态路由匹配和查询参数`query`来传递参数,并将路由参数或查询参数作为组件的`props`传递,动态路由匹配使用`route.params`访问参数,查询参数使用`route.query`访问,本文给大家介绍Vue Router中获取路由传递过来的参数,感兴趣的朋友一起看看吧
    2025-02-02
  • Vue分页插件的前后端配置与使用

    Vue分页插件的前后端配置与使用

    这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论