uni-app 使用list嵌套video做短视频整屏滑动时，会大概率出现滑动卡在中间的情况

swiper性能不行吧

在使用 uni-app 开发短视频整屏滑动功能时，如果出现滑动卡在中间的情况，通常是由于以下几个原因导致的。以下是一些可能的解决方案：

1. 优化 scroll-view 的配置

• scroll-view 的 scroll-y 属性：确保 scroll-view 的 scroll-y 属性设置为 true，以启用垂直滚动。
• scroll-view 的 scroll-with-animation 属性：设置为 true，可以让滚动过程更加平滑。
• scroll-view 的 scroll-top 属性：在滑动时动态更新 scroll-top 的值，确保滑动位置正确。

<scroll-view scroll-y scroll-with-animation :scroll-top="scrollTop" [@scroll](/user/scroll)="handleScroll">
  <view v-for="(item, index) in videoList" :key="index">
    <video :src="item.src" controls></video>
  </view>
</scroll-view>

export default {
  data() {
    return {
      videoList: [
        { src: 'video1.mp4' },
        { src: 'video2.mp4' },
        // ...
      ],
      scrollTop: 0
    };
  },
  methods: {
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop;
    }
  }
};

2. 使用 swiper 组件替代 scroll-view

• swiper 组件更适合整屏滑动的场景，尤其是短视频滑动。swiper 组件本身支持整屏滑动，并且滑动效果更加流畅。

<swiper :current="currentIndex" [@change](/user/change)="handleSwiperChange" vertical>
  <swiper-item v-for="(item, index) in videoList" :key="index">
    <video :src="item.src" controls></video>
  </swiper-item>
</swiper>

export default {
  data() {
    return {
      videoList: [
        { src: 'video1.mp4' },
        { src: 'video2.mp4' },
        // ...
      ],
      currentIndex: 0
    };
  },
  methods: {
    handleSwiperChange(e) {
      this.currentIndex = e.detail.current;
    }
  }
};

3. 优化 video 组件的加载

• 预加载视频：在滑动到下一个视频时，提前加载视频资源，避免滑动时卡顿。
• 懒加载视频：只在视频进入可视区域时加载视频资源，减少初始加载压力。

methods: {
  handleSwiperChange(e) {
    this.currentIndex = e.detail.current;
    this.preloadNextVideo();
  },
  preloadNextVideo() {
    const nextIndex = this.currentIndex + 1;
    if (nextIndex < this.videoList.length) {
      const videoContext = uni.createVideoContext(`video${nextIndex}`);
      videoContext.play();
      videoContext.pause(); // 预加载但不播放
    }
  }
}

4. 减少页面复杂度

• 减少不必要的 DOM 元素：确保页面中只有必要的元素，减少渲染压力。
• 避免复杂的 CSS 动画：复杂的动画可能会导致页面卡顿，尤其是在滑动时。

5. 使用 page-meta 优化页面性能

• 使用 page-meta 组件来优化页面的渲染性能，尤其是在处理大量视频时。

<page-meta :page-style="'overflow: hidden;'"></page-meta>