vue-carousel-3d 分页器实现和绕过现有的bug

 

在面向百度了很长时间之后
也没有发现vue-carousel-3d 这个轮播插件 的分页器无奈只好自己写了

正常引包
 

import { Carousel3d, Slide } from 'vue-carousel-3d'

  components: {
    Carousel3d,
    Slide,
    'el-table': Table,
    'el-table-column': TableColumn
  },

HTML中使用 添加了@before-slide-change="onSlideChange" 这个方法 这个方法是 carousel-3d自带的方法
vue-carousel-3d 就是封装了一遍

              <carousel-3d
                :loop="true"
                :space="80"
                :width="280"
                :height="72"
                :border="0"
                :perspective="0"
                :scaling="0"
                :display="3"
                @before-slide-change="onSlideChange"
                ref="carousel"
                v-if="hackReset"
              >
                <slide :class="'carousel'+(index+1)%3" class="carousel" v-for="(item,index) in teamPresentProposalList" :key="index" :index='index'>
                  <div class="carouselTitle">{{item.type == 1?'现状描述':'建议描述'}}</div>
                  <div class="carouselContent">{{item.content}}</div>
                </slide>
              </carousel-3d>

分页器

              <div style="text-align: center;">
                <img @click="goSlideIndex(index)" height="20px" v-for="(item,index) in teamPresentProposalList" :key="index" :src="carouselIndex!=index?'/static/img/circular.png':'/static/img/circular_check.png'"/>
              </div>

js 发生改变时 替换图片 下面是点击图片跳转相对应的卡片

    onSlideChange(temp){
      console.log(this.$refs.carousel.total);
      this.carouselIndex = temp;
    },

    goSlideIndex(index){
      if(index>this.teamPresentProposalList.length-1 || 0>this.teamPresentProposalList.length-1){
        return;
      }
      this.$refs.carousel.goSlide(index);
    },

最后发现一个bug

页面刷新时 数据刷新 如果第一次slide的长度 比刷新后的slide长度长时  会保留上一刷新前的total
不知道你们有没有遇到  
解决方法：

数据刷新时 直接给total赋值就行
页面渲染时可能会有报红 无伤大雅 

this.$refs.carousel.total = this.teamPresentProposalList.length