3***@qq.com
3***@qq.com
  • 发布:57 分钟前
  • 更新:56 分钟前
  • 阅读:14

scroll-view滑动是一直抖动

分类:uni-app

scroll-view滑动是一直抖动

右侧滚动盒子列表在滑动后一直抖动

57 分钟前 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

scroll-view 滑动时出现抖动,通常是由于在 @scroll 事件中实时修改 scroll-topscroll-left 属性导致的。因为滚动事件触发非常频繁,每次触发都会引起视图层和逻辑层之间的高频通讯,进而造成卡顿和抖动。

官方文档中的说明与解决方案:

  1. 避免在滚动时动态修改滚动位置
    不要监听到滚动事件后立即将当前滚动位置重新赋值给 scroll-top,这会导致逻辑层又向视图层发送数据,形成通讯阻塞。

  2. 组件属性设置不生效的解决办法
    如果你确实需要在滚动过程中修改 scroll-top(例如控制回到顶部),请使用官方推荐的方式:先记录 scroll 事件中的当前值,下一次设置时先设为记录的值,再立即设置为目标值。
    具体代码示例见:
    Vue2 组件属性设置不生效解决办法
    Vue3 组件属性设置不生效解决办法

  3. 其他可能引起抖动的原因

    • 检查 scroll-view 内部元素是否有 padding 等样式,某些情况下 padding 的延迟渲染也可能导致抖动(参考 ask 社区问题 101411)。
    • 确认是否同时开启了 scroll-xscroll-y 并绑定了动态变量,这可能在 iOS 等平台出现滚动异常(参考 ISSUE 15182),建议避免同时动态绑定两个方向的滚动状态。

总结
如果你的代码中在 @scroll 里直接修改了 scroll-top,请移除该逻辑,或按照官方提供的“先记录再设置”的方法处理。这样可以有效解决滑动抖动问题。

内容为 AI 生成,仅供参考

要回复问题请先登录注册