解决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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Vue中的methods、watch、computed的区别
Nov 26 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php标签云的实现代码
2012/10/10 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
学校十一活动方案
2014/02/01 职场文书
采购主管岗位职责
2014/02/01 职场文书
采购部部长岗位职责
2014/02/06 职场文书
班级德育工作实施方案
2014/02/21 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
纪检监察立案决定书
2015/06/24 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书