wow.js在uniapp中使用报错'requestAnimationFrame' is undefined如何解决？

在uniapp中使用wow.js时遇到报错’requestAnimationFrame’ is undefined，请问该如何解决？这个错误似乎与浏览器API在uniapp环境中的兼容性有关，尝试过引入polyfill但没效果。有没有在uniapp中成功集成wow.js的解决方案？需要具体配置步骤或替代方案。

2 回复

在uniapp中使用wow.js报错，是因为小程序环境不支持requestAnimationFrame。解决方案：

  1. 在main.js中添加polyfill：
if (typeof requestAnimationFrame === 'undefined') {
  global.requestAnimationFrame = function(callback) {
    return setTimeout(callback, 16)
  }
}
  1. 或者使用uniapp兼容的动画库替代wow.js

在uniapp中使用wow.js出现’requestAnimationFrame’ is undefined错误，是因为uniapp环境（尤其是小程序平台）不支持浏览器原生的requestAnimationFrame API。

解决方案：

  1. 添加polyfill（推荐）
// 在main.js或页面中引入
if (typeof requestAnimationFrame === 'undefined') {
  global.requestAnimationFrame = function(callback) {
    return setTimeout(callback, 16)
  }
  global.cancelAnimationFrame = function(id) {
    clearTimeout(id)
  }
}
  1. 使用uniapp的API替代
// 创建动画函数
const requestAnimationFrame = (callback) => {
  return setTimeout(callback, 1000 / 60)
}

const cancelAnimationFrame = (id) => {
  clearTimeout(id)
}
  1. 修改wow.js源码 在wow.js中找到使用requestAnimationFrame的地方，替换为：
// 将原来的：
requestAnimationFrame(func)
// 改为：
setTimeout(func, 16)
  1. 使用条件编译（针对小程序）
// #ifdef MP-WEIXIN
if (typeof requestAnimationFrame === 'undefined') {
  global.requestAnimationFrame = (callback) => setTimeout(callback, 16)
}
// #endif

建议：

  • 优先使用方案1，在应用入口处添加polyfill
  • 如果只是在小程序中使用，建议使用条件编译
  • 考虑使用uniapp原生动画API或专门的uniapp动画库替代wow.js

这样可以确保在不同平台都能正常运行动画效果。

回到顶部