Vue如何实现标题栏动态更新及当前可见滑动页序号实时获取

问题根源 #

你当前的写法错误在于将setSlideNumber直接写在了v-for循环的模板节点内，Vue每次渲染页面时都会按顺序执行所有slide对应节点的setSlideNumber方法，最终slideno一定会被覆盖为最后一个slide的序号，和当前哪个slide在视口可见完全无关，所以才会出现一直递增到最大值就不动的问题。

解决方案 #

推荐用你已经接入的v-observe-visibility指令来检测slide可见性，成本最低：

1. 修改模板 #

删除v-for节点内的{{setslideNumber(index)}}，给每个slide容器增加可见性监听：

<div 
  v-for="(images, index) in slides"
  :key="index"
  v-observe-visibility="(isVisible) => handleSlideVisibility(isVisible, index)"
>
  <!-- 你原有容器内的代码完全不变 -->
  <div class="container read">
    <!-- 原有内容省略 -->
  </div>
</div>

2. 新增可见性处理方法 #

在methods中增加对应的处理逻辑：

methods: {
  // 原有方法（比如handleScrolledToBottom）保留
  handleSlideVisibility(isVisible, index) {
    // 仅当slide进入视口可见时更新序号
    if (isVisible) {
      this.slideno = index + 1
      // 需要同步到页面标题的话加下面这行
      document.title = `第${this.slideno}页`
    }
  }
}

可选优化（按需使用） #

如果需要slide可见比例超过指定阈值才判定为当前激活页，可以调整指令参数，比如要求50%面积可见才算：

<div 
  v-for="(images, index) in slides"
  :key="index"
  v-observe-visibility="{
    callback: (isVisible) => handleSlideVisibility(isVisible, index),
    threshold: 0.5
  }"
>

如果你要更贴合Bootstrap Carousel的滑动逻辑，也可以直接监听Carousel的原生切换事件，结果更准确：

mounted() {
  const carouselEle = document.querySelector('#carousel-pager')
  carouselEle.addEventListener('slide.bs.carousel', (e) => {
    this.slideno = e.to + 1
    document.title = `第${this.slideno}页`
  })
}

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