用vue做类似轮播图的翻页

左右键

左边的键
<div class="check-prev" onselectstart="return false" :class="{active:!ltArrow}" @click="ltArrow?dataStart--:''">
     <i class="el-icon-arrow-left"></i>
</div>

右边的键
<div class="check-next" onselectstart="return false" :class="{active:!rtArrow}" @click.prevent="rtArrow?dataStart++:''">
     <i class="el-icon-arrow-right"></i>
</div>
computed: {
    Info() {
      let begin = (this.dataStart - 1) * this.dataSize;
      let end = this.dataStart * this.dataSize;
      return this.checkDetailsList.slice(begin, end);
    },
    total() {
      return Math.ceil(this.checkDetailsList.length / this.dataSize);
    },
    ltArrow() {
      return this.dataStart !== 1;
    },
    rtArrow() {
      return this.dataStart !== this.total;
    }
  }

 

posted @ 2020-08-09 21:42  上官兰雨  阅读(627)  评论(0编辑  收藏  举报