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输入框需要连续点击两次或者长按才能获取焦点，真是到处是坑啊！

解决方法：

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 界面在苹果手机上滑动点击事件等卡顿解决方案相关推荐

android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局页面内容在对应的组件的最外层div上加上这样的样式: .conten ...
VUE 自定义日历+切换上下月+点击事件
背景:朋友想让我帮他写一个前端的日历demo,昨天晚上抽空搞了一下,产出了一个Demo.由于是简单demo,所以对样式上没有过多的调整. 思路: 获取每个月的第一天是周几,按照周几插入数据.上个月的在 ...
ant-design vue 表单使用v-decorator后点击label 输入框聚焦问题解决方案
ant-design vue 表单使用v-decorator后点击label 输入框聚焦问题解决方案最近项目有个需求如下图: 表单筛选一般是label + 输入框,这个是label是个下拉框,必有 ...
echarts 地图去除点击事件_echarts 取消图例上的点击事件和图表上鼠标滑过点击事件...
备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, formatter: " ...
主界面边框流动效果长时间挂机后会卡顿
1)主界面边框流动效果长时间挂机后会卡顿 2)检测内存是否超过阈值问题 3)堆内存会持续上升,如何用UWA报告来分析 4)关于AssetBundle加密这块,如何重新实现LoadFromFile接口 ...
win10右键卡顿原因_windows10鼠标点击右键出现卡顿如何解决
我们在使用Windows10系统电脑过程中,经常都会通过单击鼠标右键方式来刷新桌面.不过,最近有些用户反馈,在桌面上单击右键时,会有卡顿的现象,出现过了好一会才能弹出菜单,这是怎么回事呢?该问题是由于 ...
unity打出apk包在模拟器上运行一段时间后卡顿卡死
笔者在开发unity游戏时,打出的apk包在模拟器上跑一段时间后卡顿卡死. 具体情况为,用安卓模拟器跑游戏,然后用电脑跑其他比较耗cpu的应用,一段时间后游戏帧数逐渐降低,直到0.000几帧,相当于游 ...
苹果手机上滑动会卡顿_iPhone手机卡顿怎么办？iPhone手机卡顿解决办法
iPhone手机最引以为傲的就是流畅性,能在后台和软件之间切换自如.但世界上还没有一个完美的手机系统,所以iPhone手机也是会卡顿的.软件过多,操作过频繁,或者是老版本的iPhone手机用久了都有可 ...

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

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

最新文章

热门文章