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

目录
  • 移动端解决click事件延迟,封装tap等事件
  • 移动端click事件失效

移动端解决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 })
  },

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

(0)

相关推荐

  • 解决vue的touchStart事件及click事件冲突问题

    一 .问题: 今天遇到这样问题,给某个元素同时绑定touchStart及click事件后,若在移动设备上,当你点击时,会依次出发这两个事件.因为移动端设备上的click事件触发是会延迟300ms,所以touchStart事件会先触发后再触发click事件.这样导致每次都要执行两次,这样毫无意义.这里提醒下,PC是无法识别touch相关事件 二.解决方式 (1)preventDefault方法 通过使用preventDefault方法(阻止元素默认事件行为的发生)来解决.在touchstart中添

  • vue自定义tap指令及tap事件的实现

    1.Vue指令 Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.org/v2/guide/custom-directive.html). 2.v-tap指令实现 我个人的理解,编写指令即是在vue指令对象提供的钩子函数中做相应的逻辑处理,tap指令是在bind钩子函数中做相应的处理, 首先,要明白的是tap是为了处理click事件在iphone上的存在300ms的延时,这样使得连续点击很不流畅,tap

  • 解决vue组件中click事件失效的问题

    最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

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

    目录 移动端解决click事件延迟,封装tap等事件 移动端click事件失效 移动端解决click事件延迟,封装tap等事件 下载vue-touch.js 引入: <script src="js/vue-touch.js" type="text/javascript" charset="utf-8"></script> 导航条tab: <div>                 <ul>    

  • vue @click @tap重叠事件区分方式

    目录 @click @tap重叠事件区分 click和tap事件的区别 click事件 tap事件 点透问题 @click @tap重叠事件区分 点击remove事件会触发details事件,使用@click.stop 官方介绍 <ul>     <li v-for="item in data.list" :key="item.id" @click="details(item)">         <font @cl

  • vue移动端html5页面根据屏幕适配的四种解决方法

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用. 方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案:https://github.com/amfe/lib-flexible(此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-wid

  • vue移动端的左右滑动事件详解

    本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://unpkg.com/vue"></script> <meta name="viewport" c

  • 解决Vue 移动端点击出现300毫秒延迟的问题

    1. 安装模块 cnpm install fastclick -S 2. 在main.js中引入,并绑定到body import FastClick from 'fastclick' FastClick.attach(document.body); 当better-scroll和 fastclick冲突的不能点击的时候: <slider> <div v-for="item in recommends"> <a :href="item.linkUr

  • vue移动端UI框架实现QQ侧边菜单组件

    最近面试发现很多前端程序员都从来没有写过插件的经验,基本上都是网上百度.所以打算写一系列文章,手把手的教一些没有写过组件的兄弟们如何去写插件.本系列文章都基于VUE,核心内容都一样,会了之后大家可以快速的改写成react.angular或者是小程序等组件.这篇文章是第一篇,写的是一个类似QQ的侧边菜单组件. 效果展示 先让大家看个效果展示,知道咱们要做的东西是个怎么样的样子,图片有点模糊,大家先将就点: 开始制作 DOM结构 整体结构中应该存在两个容器:1. 菜单容器 2. 主页面容器:因此当前

  • Vue服务端渲染实践之Web应用首屏耗时最优化方案

    随着各大前端框架的诞生和演变,SPA开始流行,单页面应用的优势在于可以不重新加载整个页面的情况下,通过ajax和服务器通信,实现整个Web应用拒不更新,带来了极致的用户体验.然而,对于需要SEO.追求极致的首屏性能的应用,前端渲染的SPA是糟糕的.好在Vue 2.0后是支持服务端渲染的,零零散散花费了两三周事件,通过改造现有项目,基本完成了在现有项目中实践了Vue服务端渲染. 关于Vue服务端渲染的原理.搭建,官方文档已经讲的比较详细了,因此,本文不是抄袭文档,而是文档的补充.特别是对于如何与现

  • 解决Js先触发失去焦点事件再执行点击事件的问题

    最近在做公司的某个从项目,基本设计和淘宝登陆页类似: 1)文本框内容为空是,文本框右侧无清除按钮,当有内容时立即显示清除按钮: 2)当文本框失去焦点时,清除按钮消失,获取焦点时若文本框内有内容,则显示清除按钮,否则不显示: 3)文本框再有内容且获取焦点的情况下,点击清除按钮,文本框内容置空,且清除按钮消失. 随后想了想,感觉是个很简单的需求,只要结合使用keyup和blur以及click时间就可以解决了,然而,结果却不是我想要的,代码如下: html代码: <div class="inpu

  • vue移动端轻量级的轮播组件实现代码

    一个简单的移动端卡片滑动轮播组件,适用于Vue2.x c-swipe 2.0 全新归来.重写了全部的代码,更靠谱的质量,更优秀的性能 English Document 安装 npm install c-swipe --save 使用 注册组件 // main.js // 引入 c-swipe 主文件 import 'c-swipe/dist/swipe.css'; import { Swipe, SwipeItem } from 'c-swipe'; // 全局注册组件 Vue.componen

  • vue移动端弹起蒙层滑动禁止底部滑动操作

    解决办法 在蒙层弹起的时候将body设置为fixed定位 在蒙层消失的时候将body恢复原位 popupVisible(newValue) { if (newValue) { document.body.style.position = 'fixed'; document.body.style.width = '100%'; document.body.style.height = '100%'; } else { document.body.style.position = 'static';

随机推荐