实现翻页组件

<template>
  <div class="turnpage-container">
    <!-- 向左移动 -->
    <div @click="onBeforenavClick()">
    //插入左边内容
      <slot name="turnBefore">
        <i class="el-icon-d-arrow-left turn-icon"></i>
      </slot>
    </div>
    <!-- 内容的显示 -->
    <div v-for="(item,index) in newList" @click="onItemClick(item)" :key="index">
    //插槽的知识点，采用v-bind来抛出相应的item与index
      <slot name="turnContent" v-bind:item="item" v-bind:index="index">
        <span class="turn-font">{{item}}</span>
      </slot>
    </div>
    <!-- 向右移动 -->
    <div @click="onAfternavClick()">
      <slot name="turnAfter">
        <i class="el-icon-d-arrow-right turn-icon " />
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    //显示父组件原本的数组,必传
    parentData: {
      type: Array,
      required: true
    },
    //数据双向绑定,点击当前的状态 v-model
    value: {
      type: Number,
      required: true,
      default: 0
    },
    //父组件传来一页翻转多少个, 必传
    turnPageNumber: {
      type: Number,
      required: true
    },
    //一页显示多少个,必传
    showPageNumber: {
      type: Number,
      required: true
    },
    //是否完全翻页，可以不传，不传默认是false不完全翻页。true表示完全翻页
    isfullPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activedItem: -1,
      index: 0, //数组的下标
      newList: [] //跳转后的数组
    }
  },

  methods: {
    //点击显示当前的id
    onItemClick(item) {
      //this.activedItem = item
      //数据双向绑定数据当前的index
      this.$emit('input', this.index)
      //点击抛出事件，父组件自己做相应的处理
      this.$emit('turnPageChange', item)
    },

    // 导航条向左滚动
    onBeforenavClick() {
      if (this.index > 0) {
        this.index = this.index - this.turnPageNumber
        this.onItemClick() //抛出v-model
      }
    },
    //导航条向右滚动
    onAfternavClick() {
      if (this.index < this.parentData.length - this.turnPageNumber) {
        this.index = this.index + this.turnPageNumber
      }
      this.onItemClick() //抛出v-model
    }
  },
  watch: {
    parentData: {
      immediate: true, // 这句重要
      handler(val) {
        this.showList = val
        this.newList = val.slice(0, this.showPageNumber) //初始化的时候截取
      }
    },
    //监视value的值的改变
    value(val, oldValue) {
      this.index = val
      //下标改变，就开始截取数据
      this.newList = this.parentData.slice(this.index, this.index + this.showPageNumber)
      if (this.newList.length < this.showPageNumber && this.isfullPage === true && val > oldValue) {
        this.index = this.parentData.length - this.showPageNumber
        this.newList = this.parentData.slice(-this.showPageNumber)
      }
      if (this.newList.length < this.showPageNumber && this.isfullPage === true && val < oldValue) {
        this.newList = this.parentData.slice(0, this.showPageNumber)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.turnpage-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
.turn-icon {
  font-size: 18px;
  color: #888888;
}
.turn-font {
  color: #eeeeee;
  font-size: 16px;
}
</style>

案例

    <template v-slot:dragContainer>
      <TurningPage class="attribute-query-container" v-model="currentPage" :parentData="attributeContent" :turnPageNumber='1' :showPageNumber="1"  >
        <template v-slot:turnBefore>
          <div class="attribute-turning">
            <i class="el-icon-arrow-left turning-btn"></i>
          </div>
        </template>
        <template v-slot:turnContent="{ item, index }">
          <ScrollDiv class="attribute-query-content" :isHorizontal="true">
            <div v-for="(value,key) in item" :key="key" class="attribute-query-results">
              <div class="attribute-key">{{key}}:</div>
              <div class="attribute-key">{{value}}</div>
            </div>
          </ScrollDiv>
        </template>
        <template v-slot:turnAfter>
          <div class="attribute-turning">
            <i class="el-icon-arrow-right turning-btn"></i>
          </div>
        </template>
      </TurningPage>
    </template>