解决vue 界面在苹果手机上滑动点击事件等卡顿问题


Posted in Javascript onNovember 27, 2018

用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,

(1).滑动页面卡顿,

(2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。

一.滑动页面卡顿

//页面布局
<template>
 <div class='content'>
  页面内容
 </div>
</template>

在对应的组件的最外层div上加上这样的样式:

.content{
  -webkit-overflow-scrolling: touch;
  }

-webkit-overflow-scrolling: touch;这句代码最好可在公共的样式中添加,防止很多页面都需要写的麻烦。这句代码虽然可以解决滑动不流畅的问题,但是可能会引起几个小问题:

(1).在滑动界面之中使用的position:fixed 无法固定下来,会随着界面进行一起滚动

解决方法:将使用的position:fixed(头部导航)写在滑动部位外部,在使用绝对定位进行布局,以此解决问题

(2).vue中使用v-if导致的界面第一次无法滑动

解决方法:将v-if改成v-show进行展示,解决界面进入之后不能滑动的问题

二.点击事件响应缓慢

(1).安装fastclick (npm install fastclick -S)

(2).在main.js中设置方法

import FastClick from 'fastclick'
FastClick.attach(document.body);

在引入fastclick之后,虽然页面事件快了很多,但是会有一个副作用:input输入框需要连续点击两次或者长按才能获取焦点,真是到处是坑啊!

解决方法:在main.js中添加下面的代码

FastClick.prototype.focus = function(targetElement) {
 var length;
// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
 if (deviceIsIOS&& targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
  length = targetElement.value.length;
  targetElement.focus();
  targetElement.setSelectionRange(length, length);
 } else {
  targetElement.focus();
}
};

总结

以上所述是小编给大家介绍的解决vue 界面在苹果手机上滑动点击事件等卡顿问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
Node+OCR实现图像文字识别功能
Nov 26 #Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 #Javascript
JS 验证码功能的三种实现方式
Nov 26 #Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 #Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 #Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 #Javascript
Vue.js的动态组件模板的实现
Nov 26 #Javascript
You might like
PHP实现图片简单上传
2006/10/09 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
解析strtr函数的效率问题
2013/06/26 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
js表单验证实例讲解
2016/03/31 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
js实现常用排序算法
2016/08/09 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
优秀经理获奖感言
2014/03/04 职场文书
计算机网络专业求职信
2014/06/05 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
工程造价专业求职信
2014/07/17 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python