如何在Vue轮播中动态渲染video.js视频并修复vue-slick-carousel状态异常

现有vue-slick-carousel问题修复 #

你遇到的状态不同步问题，是因为vue-slick-carousel默认不会监听子slide的动态增减，内部索引、激活状态都没有对应更新，按以下步骤修复：

• 给carousel-video的v-for设置唯一键值，不要使用数组索引作为key，用视频的唯一业务ID即可：

  <carousel-video
    v-for="video in visibleVideos"
    :key="video.id"
    ....
  ></carousel-video>
  

• 每次更新lowerBound、upperBound之后，在nextTick回调中手动触发轮播组件的状态刷新，同时手动定位到正确的 slide 位置：

  methods: {
    onSlideBeforeChange: function(currentIndex, nextIndex) {
      // ...原有计算lowerBound、upperBound的逻辑
      this.$nextTick(() => {
        // 刷新slick内部状态，重新识别子项数量
        this.$refs.carousel.refresh()
        // 手动定位到目标索引，第二个参数设为false可避免多余的切换动画
        this.$refs.carousel.goTo(nextIndex, false)
      })
    },
  }
  

• 如果上述refresh方法不生效（部分旧版本vue-slick-carousel存在该问题），可以用销毁再重建的方式强制更新：

  this.$nextTick(async () => {
    await this.$refs.carousel.unslick()
    this.$refs.carousel.initSlick(this.settings)
    this.$refs.carousel.goTo(nextIndex, false)
  })
  

替代实现方案 #

如果调整后仍然存在稳定性问题，可以换用更适配动态列表的轮播方案：

• 优先使用基于Swiper封装的Vue轮播组件，该组件原生支持虚拟滚动功能，不需要手动维护上下界计算逻辑，只需要开启virtual: true配置，组件会自动仅渲染可视区附近的slide，天然支持超大量级的列表轮播，对video.js的适配也更稳定。
• 如果需求较为简单，也可以自行基于IntersectionObserver封装轻量轮播，只渲染当前可视项和前后1-2个预加载项，性能更可控，也不存在第三方组件的状态同步问题。

额外优化建议：轮播切换时及时销毁非激活项的video.js实例，避免多视频同时加载导致的内存占用过高、声音冲突问题。

内容的提问来源于stack exchange，提问作者Imam