效果实现

背景介绍

项目需要实现动态生成tab ，并结合滚动导航监听当前激活标签，滚动当前位置（可通过标签click or 滚动位置改变）两种方式监听。

但是在项目实际开始中，发现动态生成的tab无法监视当前激活标签，同时新增的时候无法自动滚动相应位置。

解决方案

可以在动态添加tab方法和遍历生成tab，共同绑定activeIndex，再通过this.$refs.tabs.scrollTo滚动到指定的位置

代码示例

      <van-tabs
        ref="tabs"
        v-model="active"
        scrollspy
        sticky
        color="#00C230"
        title-active-color="#00C230"
      >
                <van-tab
            v-for="(item, index) in feedbackData.feedbackListData"
            :key="index"
            :title="'明细' + Number(index + 1)"
          >

 let count = this.feedbackData.feedbackListData.length - 1;
      this.$nextTick(() => {
        this.active = count;
        this.$refs.tabs.scrollTo(this.active + 1);
      });