uni-app nvue下编译到h5后swiper变得很卡顿
uni-app nvue下编译到h5后swiper变得很卡顿
示例代码：
请看demo，已上传
操作步骤：
编译到h5，用ios手机测试
预期结果：
滑动流畅
实际结果：
滑动卡顿
bug描述：
swiper编译到h5后左右滑动变的很卡！！
测试发现只有在ios上会这样，我的ios系统14.5.1
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| PC开发环境操作系统 | Mac | |
| PC开发环境版本 | macOS Big Sur 11.1 | |
| HBuilderX | 正式 | HBuilderX |
| HBuilderX版本 | 3.1.13 | |
| 手机系统 | iOS | |
| 手机系统版本 | IOS 14 | |
| 手机厂商 | 苹果 | |
| 手机机型 | iphoneX | |
| 页面类型 | nvue |
更多关于uni-app nvue下编译到h5后swiper变得很卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
是自己加的swiper卡 还是新闻列表卡，录个视频看看效果
更多关于uni-app nvue下编译到h5后swiper变得很卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在nvue页面编译到H5时，iOS设备上的swiper组件确实可能出现卡顿问题。这是由于nvue在H5平台下使用了weex渲染引擎，而iOS Safari浏览器对某些CSS动画的渲染性能存在限制。
建议的解决方案：
- 在manifest.json中配置使用"webview"渲染模式替代"weex"模式
- 检查swiper-item中的内容复杂度，减少DOM层级和图片数量
- 为swiper添加
disable-touch属性，使用自定义手势控制 - 考虑使用uni-app的vue页面替代nvue页面，vue页面的swiper在H5平台性能更稳定
如果必须使用nvue，可以尝试通过CSS开启硬件加速：
.swiper {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}