SOURCE

<template>
    <div class="my-video-content">
    //   卡片容器
      <div class="sbox" ref="sbox">
        <ul :style="getStyle">
          <li :style="getVirtualStyle"></li>
          <li v-for="(item, index) in getDisplayDeviceList" :key="index" class="is-small-img">
            图片占位
          </li>
        </ul>
      </div>
      //   左右翻页按钮组
      <div class="btn-groups" v-if="total > 4">
        <div :class="getNextDisable ? 'div-next-disable' : 'div-next'" @click="nextHandler"></div>
        <div :class="getPrevDisable ? 'div-pre-disable' : 'div-pre'" @click="preHandler"></div>
      </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      total: 0, // 总个数
      pageNum: 1, //  当前页数索引，做截取用
      pageSize: 4, // 每组个数
      displayDeviceList: []
    }
  },
  methods: {
    // 下一页事件回调
    nextHandler () {
      if (!this.getNextDisable) {
        this.pageNum++
        this.$refs.sbox.querySelector('ul').style.left =
          -(this.pageNum - 1) * 29.583333359999997 + 'vw'
        this.$nextTick(() => {
          this.getThumbnail()
        })
      }
    },
    // 上一页事件回调
    preHandler () {
      if (!this.getPrevDisable) {
        this.pageNum--
        this.$refs.sbox.querySelector('ul').style.left =
          -(this.pageNum - 1) * 29.583333359999997 + 'vw'
      }
    },
    // 初始化：获取视频设备列表
    async init () {
      this.total = 0
      this.pageNum = 1
      this.displayDeviceList = []
      const res = await new Promise((reslove,reject)=>{
        setTimeout(() => {
          reslove({
            data: Array(1000).fill({}).map((item,index)=>({index}))
          }) // 模拟大数据量
        }, 1000);
      }) 
      this.total = res.data.length
      this.displayDeviceList = res.data
    },
  },
  computed: {
    //最大页数
    getMaxPageNum () {
      const { total, pageSize } = this
      return parseInt(total / pageSize) + (total % pageSize ? 1 : 0)
    },
    // 下一页是否禁用
    getNextDisable () {
      return this.getMaxPageNum === this.pageNum
    },
    // 上一页是否禁用
    getPrevDisable () {
      return this.pageNum <= 1
    },
    // 根据定位索引pageNum截取8位长度的数组数据(一页是4个，相当于每次只渲染2组8个)
    getDisplayDeviceList () {
      return this.displayDeviceList.slice((this.pageNum - 1) * 4, this.pageNum * 4 + 4)
    },
    // 整体样式宽度
    getStyle () {
      const { getMaxPageNum } = this
      return {
        width: getMaxPageNum * 29.583333359999997 + 'vw'
      }
    },
    // 第一个虚拟占位元素宽度
    getVirtualStyle () {
      const { pageNum } = this
      return {
        width: (pageNum - 1) * 29.583333359999997 + 'vw'
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" scoped>
  .my-video-content {
    height: 100%;
      .sbox {
        overflow: hidden;
        position: relative;

        ul,
        li {
          padding: 0;
          margin: 0;
          list-style: none;
        }

        ul {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          width: 100000%;
          transition: all 0.5s;
        }

        li.is-small-img {
          width: 5.729166666666667vw
          height: 5.555555555555555vh;
          cursor: pointer;

          & + li {
            margin-left: 1.6666666666666667;
          }
        }
      }
    }
</style>