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

2023-09-05 08:23:04 230

用vue编写项目接近尾声，需要集成到移动端中，在webstorm上界面，运行效果都很完美，但是在苹果手机上各种问题都出现了，原生项目一向滑动流畅，事件响应迅速，可是苹果手机打开这个项目有两个问题，

(1).滑动页面卡顿，

(2).点击事件响应缓慢，百度才发现在苹果手机上有300ms的延迟。

一.滑动页面卡顿

//页面布局

在对应的组件的最外层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(npminstallfastclick-S)

(2).在main.js中设置方法

importFastClickfrom'fastclick'
FastClick.attach(document.body);

在引入fastclick之后，虽然页面事件快了很多，但是会有一个副作用：input输入框需要连续点击两次或者长按才能获取焦点，真是到处是坑啊！

解决方法：在main.js中添加下面的代码

FastClick.prototype.focus=function(targetElement){
varlength;
//Issue#160:oniOS7,someinputelements(e.g.datedatetimemonth)throwavagueTypeErroronsetSelectionRange.Theseelementsdon'thaveanintegervaluefortheselectionStartandselectionEndproperties,butunfortunatelythatcan'tbeusedfordetectionbecauseaccessingthepropertiesalsothrowsaTypeError.Justcheckthetypeinstead.FiledasApplebug#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界面在苹果手机上滑动点击事件等卡顿问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐