用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,
(1)滑动页面卡顿,
(2)。点击事件响应缓慢,百度才发现在苹果手机上有300 ms的延迟。
//页面布的局
& lt; template>
& lt; div类=澳谌荨北?
页面内容
& lt;/div>
& lt;/template>
在对应的组件的最外层div上加上这样的样式:
.content {
-webkit-overflow-scrolling:触摸;
}
-webkit-overflow-scrolling:触摸;这句代码最好可在公共的样式中添加,防止很多页面都需要写的麻烦。这句代码虽然可以解决滑动不流畅的问题,但是可能会引起几个小问题:
(1)。在滑动界面之中使用的位置:固定无法固定下来,会随着界面进行一起滚动
解决方法:将使用的位置:固定(头部导航)写在滑动部位外部,在使用绝对定位进行布的局,以此解决问题
(2) .vue中使用v导致的界面第一次无法滑动
解决方法:将v如果改成v-show进行展示,解决界面进入之后不能滑动的问题
(1)。安装fastclick (npm安装fastclick - s)
(2)。在main.js中设置方法
从“FastClick”进口FastClick
FastClick.attach (document.body);
在引入fastclick之后,虽然页面事件快了很多,但是会有一个副作用:输入输入框需要连续点击两次或者长按才能获取焦点,真是到处是坑啊!
解决方法:在main.js中添加下面的代码
FastClick.prototype。专注=函数(targetElement) {
var长度;//问题# 160:在iOS 7日一些输入元素(如日期datetime)把一个模糊的TypeError setSelectionRange。这些元素没有selectionStart和selectionEnd属性的一个整数值,但不幸的是,不能用于检测也抛出一个TypeError因为访问属性。只是检查类型。作为苹果提出错误# 15122724。
如果(deviceIsIOS&和targetElement。setSelectionRange,,targetElement.type.indexOf(日期)!==0,,targetElement。类型!==奔洹?,targetElement。类型!=='月'){
长度=targetElement.value.length;
targetElement.focus ();
targetElement。setSelectionRange(长度,长度);
其他}{
targetElement.focus ();
}
};
以上所述是小编给大家介绍的解决vue界面在苹果手机上滑动点击事件等卡顿问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
