fix: 🐛 修复 Swiper 在微信小程序平台轮播视频时在iOS平台全屏展示异常的问题#898
Merged
Moonofweisheng merged 1 commit intomasterfrom Feb 16, 2025
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough这次变更涉及两个 Vue 组件。在 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as wd-swiper 组件
participant P as 平台检测
U->>C: 请求组件渲染
C->>P: 检查当前平台
alt 当前平台为 MP-WEIXIN
P-->>C: 返回 MP-WEIXIN
C->>C: 使用 <scroll-view> 包裹 <swiper>
else 其他平台
P-->>C: 返回其他平台信息
C->>C: 直接渲染 <swiper>
end
C-->>U: 渲染完成
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue (1)
4-4: 建议优化 scroll-view 的滚动配置当前配置同时启用了横向和纵向滚动，这可能会影响用户体验。建议根据
direction属性动态控制滚动方向。- <scroll-view scroll-x scroll-y style="width: 100%; height: 100%"> + <scroll-view :scroll-x="direction !== 'vertical'" :scroll-y="direction === 'vertical'" style="width: 100%; height: 100%">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/demo-block/demo-block.vue(0 hunks)src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/demo-block/demo-block.vue
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue (2)
3-5: 平台特定的包装器添加得当！通过条件编译标签
MP-WEIXIN专门针对微信小程序平台添加包装器，这种处理方式符合最佳实践。Also applies to: 54-56
26-41:Details
❓ Verification inconclusive
视频组件配置合理
- 视频组件的配置参数完整，包括了必要的事件处理和播放控制。
- 通过
enable-progress-gesture="false"禁用了进度手势，这有助于防止与滑动冲突。- 使用
objectFit="cover"确保视频填充显示。请验证在 iOS 设备上的微信小程序环境中进行全面测试，确保：
- 视频可以正常全屏
- 全屏后的视频位置正确
- 退出全屏后轮播组件状态正常
建议参考微信小程序文档中关于视频组件的最新更新：
🌐 Web query:
微信小程序 video 组件在 iOS 平台的全屏表现有哪些注意事项？💡 Result:
微信小程序video组件在iOS平台的全屏表现需注意以下关键点：
兼容性问题与解决方案
1. 全屏遮挡问题
- iOS 16系统下使用自定义导航栏时会出现视频遮挡现象[1][7]
- 临时解决方案：使用
<cover-view>包裹<video>标签并监听全屏事件刷新布局[1]- 代码示例：
<cover-view> <video src="xxx" @fullscreenchange="handleFullscreen" webkit-playsinline /> </cover-view>2. 横竖屏适配
- 需通过
direction属性明确设置全屏方向（0/90/-90）[6][8]- iOS默认根据宽高比自动判断方向，可能导致非预期旋转[5][8]
3. 事件监听机制
- iOS专用事件：
video.addEventListener("webkitbeginfullscreen", () => {}) // 进入全屏 video.addEventListener("webkitendfullscreen", () => {}) // 退出全屏- 退出全屏后必须手动刷新页面布局[1][7]
核心配置属性
属性 iOS要求 作用 webkit-playsinline必须 启用局域播放 playsinlineiOS10+ 替代旧属性 autoplay受限 需配合 muted使用page-gesturefalse 禁用非全屏手势 特殊注意事项
层级问题：
- iOS全屏时视频层级最高会覆盖原生组件[4][6]
- 规避方案：使用
cover-view实现自定义控件（基础库2.4.0+）[6]自动播放策略：
- iOS8+必须用户主动操作触发播放[4]
- iOS10+允许静音视频自动播放[4]
样式陷阱：
- 避免父级元素设置
position:fixed导致布局异常[9]- video默认尺寸300x225px，需显式设置宽高[8]
官方已确认iOS16存在全屏渲染bug（2022年8月报告），建议关注微信开发者社区获取最新修复进展。若遇紧急问题可暂时采用cover-view方案过渡处理[1][7]。
Citations:
- 1: https://developers.weixin.qq.com/community/develop/doc/00042e65094d6015486e83d7351000
- 2: https://blog.csdn.net/daimomo000/article/details/56289601
- 3: https://developers.weixin.qq.com/community/develop/doc/000064bfb38a08abd45bd229851c00
- 4: https://lizh.gitbook.io/knowledge/html-tan-suo-xi-lie/02video-yuan-su-de-shi-yong-he-chang-jian-wen-ti-zong-jie
- 5: https://developers.weixin.qq.com/community/develop/doc/00004caa9684a0ed54df91e6a56000
- 6: https://zh.uniapp.dcloud.io/component/video.html
- 7: https://developers.weixin.qq.com/community/develop/doc/000e084da387883f958ef905751000
- 8: https://developers.weixin.qq.com/miniprogram/dev/component/video.html
- 9: https://blog.csdn.net/LuLuke_lucky/article/details/119953276
- 10: https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/media-component/video
测试并验证 iOS 全屏下视频及轮播状态
视频组件现有配置整体较为合理，事件绑定和禁用进度手势处理也到位。但根据最新微信小程序文档说明，建议在 iOS 设备（例如 iOS16 环境下）进行以下验证：
- 检查视频在全屏模式下是否能正常全屏显示，避免出现全屏遮挡或横竖屏适配异常（如自定义导航栏可能引发遮挡问题）。
- 验证视频全屏后位置是否正确，且退出全屏后轮播组件状态能够及时恢复，避免布局异常。
- 如发现问题，可考虑参考文档建议方案，例如使用
<cover-view>包裹<video>标签，并监听webkitbeginfullscreen和webkitendfullscreen事件来刷新布局。请根据以上建议，针对 iOS 微信小程序环境执行全面测试，确保用户体验无误。
19 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✅ Closes: #885
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#885
💡 需求背景和解决方案
参考微信开放社区的问题ios swiper组件中使用video，全屏错位？，可以使用
scroll-view阻断上层元素定位对video的影响。☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式