原因:fullscreenchange事件会在进入全屏和退出全屏时各触发一次。所以全屏切换期间会触发两次该事件。
解决方案:
js文章来源:https://www.toymoban.com/news/detail-724450.html
Copy code文章来源地址https://www.toymoban.com/news/detail-724450.html
- 在监听fullscreenchange事件时,使用变量进行防抖处理。比如设置一个变量来记录上一次的全屏状态,只有当状态真正发生改变时才执行处理逻辑。
fullScreen(e) { let lastFullscreen = false; const isFullscreen = e.detail.fullScreen console.log('lastFullscreen:', lastFullscreen, isFullscreen) if (isFullscreen !== lastFullscreen && lastFullscreen == true) { // 状态改变,执行处理逻辑 if (!isFullscreen) { lastFullscreen = false; console.log('lastFullscreen:', lastFullscreen, isFullscreen) this.videoContext.requestFullScreen(); } else { lastFullscreen = true; console.log('lastFullscreen:', lastFullscreen, isFullscreen) this.videoContext.exitFullScreen(); } } },
- 使用setTimeout及清除定时器的方式防抖,只在fullscreen状态稳定后的一次事件中处理。
- 在微任务队列中处理事件回调,这样可以合并连续的fullscreenchange事件。
- 根据全屏切换的场景,通过代码直接控制只监听必要的全屏事件。比如只在视频全屏时才监听。
到了这里,关于已解决 微信小程序uniapp使用video的时候全屏方法@fullscreenchange会执行两次的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!