Nuxt.js中Bootstrap Vue b-carousel滑动事件捕获及激活值获取方案

核心思路 #

Bootstrap Vue的b-carousel组件内置了双向绑定与滑动事件，你可以通过两种方式获取当前激活的幻灯片内容：

• 直接借助v-model绑定的变量获取当前索引，再从数据源中提取对应项
• 通过组件提供的滑动事件捕获切换前后的索引，进而获取目标内容

具体实现步骤 #

1. 完善组件脚本 #

在组件的脚本部分，定义好必要的数据变量与处理方法，同时通过监听索引变化实时更新当前内容：

export default {
  data() {
    return {
      slide: 0, // 当前激活幻灯片的索引（从0开始）
      interval: 5000,
      word_list: [], // 你的幻灯片数据源
      currentWordItem: null // 存储当前激活的幻灯片内容
    }
  },
  watch: {
    // 监听索引变化，自动更新当前内容
    slide(newIndex) {
      this.currentWordItem = this.word_list[newIndex]
    }
  },
  mounted() {
    // 初始化时设置默认显示的内容
    if (this.word_list.length > 0) {
      this.currentWordItem = this.word_list[0]
    }
  },
  methods: {
    // 滑动开始时触发，参数为切换前的索引
    onSlideStart(fromIndex) {
      console.log('即将从第', fromIndex + 1, '张幻灯片切换')
    },
    // 滑动结束时触发，参数为切换后的索引
    onSlideEnd(toIndex) {
      console.log('切换到第', toIndex + 1, '张幻灯片')
      this.currentWordItem = this.word_list[toIndex]
    },
    // 切换完成时触发，参数为新的激活索引
    signalChange(newIndex) {
      console.log('当前激活幻灯片索引：', newIndex)
    }
  }
}

2. 优化模板配置 #

注意不要手动控制幻灯片的active类（组件会通过v-model自动管理），同时简化模板中的冗余代码：

<b-carousel
  ref="myCarousel"
  id="carousel-1"
  v-model="slide"
  :interval="interval"
  controls
  indicators
  background="#ababab"
  width="512"
  height="240"
  style="text-shadow: 1px 1px 2px #333;"
  @sliding-start="onSlideStart"
  @sliding-end="onSlideEnd"
  @change="signalChange"
>
  <b-carousel-slide
    v-for="(item, index) in word_list"
    :key="item.words"
    height="200px"
  >
    <div width="100%" height="100%">
      <audio controls style="text-align:center" hidden>
        <source :src="`http://localhost/api/public/Languages/English/${item.words}.mp3`" type="audio/ogg">
        <source :src="`http://localhost/api/public/Languages/English/${item.words}.mp3`" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
      <div class="amusement-slider-block">
        <h5 class="auto-slider-heading">{{ item.parent_name }}</h5>
        <div class="amusement-slider-wrap">
          <h6 class="pb-2">{{ item.words }}</h6>
          <h6 v-if="item.word_with_dot">
            {{ item.word_with_dot.replaceAll("-", "&middot;") }}
          </h6>
          <h6 class="fw-normal fst-italic my-2">{{ item.word_class }}</h6>
          <p class="auto_slider_inline auto_slider_def">{{ item.definition }}</p>
          <br />
          <p class="auto_slider_inline">Also see: {{ item.synonyms }}</p>
          <br />
          <p class="auto_slider_inline">"{{ item.word_usage }}"</p>
        </div>
      </div>
    </div>
  </b-carousel-slide>
</b-carousel>

<!-- 可选：单独显示当前激活的幻灯片内容 -->
<div class="current-slide-info mt-3">
  <h4>当前激活内容：</h4>
  <p>单词：{{ currentWordItem?.words }}</p>
  <p>释义：{{ currentWordItem?.definition }}</p>
</div>

3. 关键说明 #

• v-model="slide"会自动同步当前激活幻灯片的索引，直接通过word_list[slide]即可获取对应内容
• @sliding-start接收切换前的索引，@sliding-end和@change接收切换后的索引，可按需选择事件使用
• 通过watch监听slide变量，能自动更新当前内容，无需在每个事件中重复编写逻辑
• 禁止手动添加active类，避免与组件自身的状态管理冲突

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