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

用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();
 
}
 
};

完美解决问题!不知道还有多少未知坑等着填补,遇一坑天一坑!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玩转全栈

小程序怎么将视觉搞实现成ui

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

33117
来自专栏Jackson0714

JavaScrpit判断横竖屏

2586
来自专栏Youngxj

给网页添加一个QQ客服悬浮框

4117
来自专栏Web 开发

2014年CSS报告

国外有人把Alex的TOP1000的CSS给爬了一遍,然后做了一些统计,蛮有意思的。

1060
来自专栏Android小菜鸡

LayaAir引擎学习经历

  由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时...

6502
来自专栏州的先生

快速去除天猫工商执照图片纯色水印

1673
来自专栏知晓程序

开发 | 小程序做动画效果难?送你一个框架,10 分钟就能搞定

在小程序中使用 canvas 绘制图案、动画的难度有目共睹。除了本身写法繁琐,小程序的技术特性,也使得小程序无法使用普通 HTML 5 的 canvas 框架,...

1475
来自专栏Guangdong Qi

iOS 图标图像 (官方翻译版)

2124
来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

26212
来自专栏Jackson0714

JavaScrpit判断横竖屏

1303

扫码关注云+社区