uni-app 视频滑动列表出现卡顿bug，视频变得不流畅，以前不会这样

在 uni-app 中实现视频滑动列表时，如果出现卡顿或视频不流畅的问题，可能是由于多种原因导致的。以下是一些常见的排查和优化建议：

1. 检查视频资源

• 视频格式：确保视频格式是兼容的（如 MP4、H.264 编码）。
• 视频分辨率：如果视频分辨率过高，可能会导致解码和渲染压力过大。可以尝试降低视频分辨率或压缩视频。
• 视频加载：确保视频资源加载没有延迟或卡顿，可以通过网络抓包工具检查视频加载时间。

2. 优化列表渲染

• 懒加载：使用 lazy-load 或 onPageScroll 监听滚动事件，动态加载视频，避免一次性加载过多视频。
• 复用组件：使用 recycle-list 或 virtual-list 组件，减少 DOM 节点数量，提升渲染性能。
• 减少 DOM 层级：简化列表项的 DOM 结构，避免嵌套过深。

3. 优化视频播放

• 自动播放：避免同时播放多个视频，可以通过 onPlay 和 onPause 事件控制视频的播放和暂停。
• 预加载：使用 preload 属性预加载视频，但不要过度预加载，以免占用过多内存。
• 销毁未播放的视频：在滑动时，销毁不可见的视频组件，释放资源。

4. 检查内存和性能

• 内存泄漏：检查是否有未释放的资源或事件监听器，导致内存占用过高。
• 性能监控：使用 Chrome DevTools 或 uni-app 自带的性能分析工具，检查 CPU 和内存占用情况。

5. 平台差异

• 平台兼容性：uni-app 在不同平台（如 H5、小程序、App）上的表现可能不同。检查是否在特定平台上出现卡顿。
• 原生组件：在小程序或 App 中，使用原生组件（如 video）可能会比 H5 更流畅。

6. 代码优化

• 减少不必要的计算：避免在 scroll 或 touchmove 事件中执行复杂的计算。
• 节流和防抖：对滚动事件进行节流或防抖处理，减少事件触发频率。

7. 测试和调试

• 逐步排查：注释掉部分代码，逐步排查问题来源。
• 日志输出：在关键位置添加日志，检查代码执行情况。

示例代码优化

以下是一个简单的优化示例：

<template>
  <scroll-view scroll-y [@scroll](/user/scroll)="handleScroll">
    <view v-for="(item, index) in videoList" :key="index">
      <video
        :src="item.src"
        :autoplay="activeIndex === index"
        @play="handlePlay(index)"
        @pause="handlePause(index)"
      ></video>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      videoList: [
        { src: 'video1.mp4' },
        { src: 'video2.mp4' },
        // ...
      ],
      activeIndex: -1, // 当前播放的视频索引
    };
  },
  methods: {
    handleScroll(e) {
      // 根据滚动位置计算当前可见的视频索引
      const scrollTop = e.detail.scrollTop;
      // 更新 activeIndex
    },
    handlePlay(index) {
      this.activeIndex = index;
    },
    handlePause(index) {
      if (this.activeIndex === index) {
        this.activeIndex = -1;
      }
    },
  },
};
</script>