uni-app x 版swiper组件写短视频功能时闪退

发布于 1周前 作者 caililin 来自 Uni-App

uni-app x 版swiper组件写短视频功能时闪退

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win1
HBuilderX 正式
HBuilderX版本 4.29
手机系统 Android
手机版本号 Android 9.0
手机厂商 华为
手机机型 安卓
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 没有任何闪退提示

预期结果：

  • 没有任何闪退提示

实际结果：

  • 没有任何闪退提示

bug描述：

uniappx简单写的一个swiper滑动短视频，滑动视频多了会闪退。是什么问题？附件代码demo和视频闪退 闪退视频地址：https://mp-5d0fc4c8-b690-4f9c-b104-518c78d713a7.cdn.bspapp.com/cloudstorage/闪退视频.mp4

index3.zip


Harmonyos Next教程
9 回复

感谢反馈，也提供了复现工程，接下来我跟进这个问题。经过你的测试，有关注到其他手机也会这样吗，有测试其他平台吗？


小米手机会这样，模拟器会这样。大部分模拟器测试的。

模拟器允许 官方的hello-uniapp-x代码，里面有个模板的竖滑视频，多滑动，快速往下滑动，滑30秒以上，就会出现卡死，崩溃。

你提供的附件中有一个 uvue文件。运行起来之后页面是空白的

空白的那是加一个style .sx-flex-1{ flex: 1; }。 我上传新的附件了。

index3.zip新附件，你试试，多滑动看看。 还有我下载官方的hello-uniapp-x代码，里面有个模板的竖滑视频，多滑动，快速往下滑动，滑30秒以上，就会出现卡死，崩溃。

回复 速翔网络: 我试试

回复 速翔网络: 我连续滑动没有复现问题。 能否给出一个能容易出现报错的示例

在处理 uni-app 的 swiper 组件用于短视频功能时遇到的闪退问题，首先需要确保你的 uni-app 和相关依赖库都是最新版本，因为新版本通常修复了旧版本的一些已知问题。然而，如果问题依然存在，我们可以考虑从代码层面进行优化和调试。

以下是一个简化的 uni-app 项目中使用 swiper 组件展示短视频列表的示例代码，同时给出一些可能的优化点来避免闪退：

示例代码

<template>
  <view class="container">
    <swiper
      :autoplay="true"
      interval="3000"
      duration="500"
      circular
      indicator-dots
      @change="swiperChange"
    >
      <swiper-item v-for="(video, index) in videoList" :key="index">
        <video
          class="video-item"
          :src="video.src"
          controls
          autoplay
          loop
          muted
          object-fit="cover"
        ></video>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: [
        { src: 'https://example.com/video1.mp4' },
        { src: 'https://example.com/video2.mp4' },
        // 更多视频...
      ],
    };
  },
  methods: {
    swiperChange(event) {
      console.log('Swiper changed to index:', event.detail.current);
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.video-item {
  width: 100%;
  height: 300px; /* 根据需要调整 */
}
</style>

优化点

  1. 内存管理：确保视频资源在不需要时能够被正确释放。例如，可以在组件销毁时停止视频播放。

  2. 性能优化：如果视频数量较多，考虑使用懒加载技术，只在 swiper-item 进入视口时才加载视频。

  3. 错误处理：添加视频加载错误处理逻辑，避免因为视频资源加载失败导致的闪退。

  4. 硬件加速：在某些情况下，硬件加速可以提高视频播放的性能，可以尝试在 video 标签上添加 playsinline 和 webkit-playsinline 属性。

  5. 日志记录：增加更多的日志记录，帮助定位闪退的具体原因。

如果上述方法仍然无法解决闪退问题，建议检查设备的内存使用情况，以及是否有其他系统级的问题导致应用崩溃。此外，也可以考虑使用原生的视频播放组件或者在必要时向 uni-app 社区或官方寻求帮助。

回到顶部