解决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();
}
};
总结
以上所述是小编给大家介绍的解决vue 界面在苹果手机上滑动点击事件等卡顿问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要介绍了Vue Class Component类组件用法，组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强2022-12-12
这篇文章主要介绍了vue视图不更新情况详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下2017-04-04
我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
Vue.extend和VueComponent的关系源码解析
这篇文章主要为大家详解了Vue.extend和VueComponent的关系源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
vue如何通过router-link或者button跳转到一个新的页面
这篇文章主要介绍了vue如何通过router-link或者button跳转到一个新的页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文介绍了五种刷新Vue当前组件的方法：使用location.reload()、路由刷新、v-if或key属性、beforeRouteUpdate导航守卫以及$forceUpdate,每种方法都有其适用场景和优缺点,需要的朋友可以参考下2025-02-02
在使用Vue过渡动画时,注意选择器优先级,谨慎合并样式,Vue2中关于显示隐藏的类名有v-enter、v-leave以及v-enter-active、v-leave-active等,这些可以用来定义动画的持续时间和样式,感兴趣的朋友跟随小编一起看看吧2024-09-09
vue2项目导出操作实现方法(后端接口导出、前端直接做导出)
这篇文章主要给大家介绍了关于vue2项目导出操作实现方法的相关资料,文中介绍的是后端接口导出、前端直接做导出,通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue中如何引入html静态页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论