dost2016
2021-10-26 12:35
采纳率: 0%
浏览 562

vue轮播松手时卡顿,ios14.6及以上版本的手机,app中内嵌vue页面轮播卡顿问题

如题,ios14.6及以上版本的手机,app中轮播卡顿。
现象是手指拖动图片的运动是平滑流程的,但放开图片,图片向前或向后进行一次轮播,放开的这一瞬间会卡一下。在同一部手机的safari或微信中没有这个问题,只有在app中有这个问题。

开始用的是vant自带的轮播组件有卡顿问题。后来用了vue-awesome-swiper同样如此,然后手写轮播,通过transform+transition实现轮播效果,属性加上各种兼容写法依然有问题。调试之后发现,如果轮播元素一直添加transition属性,整个运动是流畅的,但为了实现手指拖动的效果,touchstart到touchmove过程中元素是没有transition属性的,到touchend时才添加,正是这个时候页面会卡顿一下。而且还会出现上一个或一下个轮播页面白屏闪屏的问题。研究了很长时间还是没有找到方法,请教!~

  • 好问题 提建议
  • 收藏

4条回答 默认 最新

  • 王大师王文峰 2021-10-26 14:45

    app有问题就把这个app的轮播改掉,或者换个手机试一试啊,

    评论
    解决 2 无用
    打赏 举报
  • 技术专家团-剑客 2021-10-26 13:51

    尝试更换app的webview,找下app负责人。一般会有两套webview。

    评论
    解决 无用
    打赏 举报
  • 某某徐 2021-10-30 11:57

    样式冲突了 重点排查样式冲突问题 !important这种

    评论
    解决 无用
    打赏 举报
  • weixin_45905067 2021-11-01 17:31

    个人觉得还是在" touchstart到touchmove过程中元素是没有transition属性的,到touchend时才添加 "这里,应该是这里的属性修改的时机可能存在问题(而且你是transform+transition自动实现轮播,那你是怎么实现touchmove的时机和自动的时机无缝衔接,这里可能也有问题),个人意见,仅供参考。不过IOS14的问题确实挺多的,我之前 css 样式在其他平台都没问题,就是 IOS 不正常,无解!只能换布局和实现方法。

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题