解决vue 界面在苹果手机上滑动点击事件等卡顿问
网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要介绍了vue 界面在苹果手机上滑动点击事件等卡顿解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,
(1).滑动页面卡顿,
(2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。
一.滑动页面卡顿
//页面布局 <template> <div class='content'> 页面内容 </div> </template>
在对应的组件的最外层div上加上这样的样式
.content{ -webkit-overflow-scrolling: touch; }
-webkit-overflow-scrolling: touch;这句代码最好可在公共的样式中添加,防止很多页面都需要写的麻烦。这句代码虽然可以解决滑动不流畅的问题,可能会引起几个小问题
(1).在滑动界面之中使用的positionfixed 无法固定下来,会随着界面进行一起滚动
解决方法将使用的positionfixed(头部导航)写在滑动部位外部,在使用绝对定位进行布局,以此解决问题
(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中添加狼蚁网站SEO优化的代码
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 aessing 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 界面在苹果手机上滑动点击事件等卡顿问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,长沙网络推广会及时回复大家的!
上一篇:详解vuex 渐进式教程实例代码
下一篇:Node+OCR实现图像文字识别功能
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程