点击无限滚动效果实现

<template>
  <div id="main">
    <div class="viewPot">
      <div class="pic">
        <div class="pic_body" v-for="(item, key) in picArr" :key="key">
          {{item}}
        </div>
      </div>
      <div class="tools">
        <div class="toolslist" @click="picMoove(1111111111111111)">1</div>
        <div class="toolslist" @click="picMoove(2222222222222222)">2</div>
        <div class="toolslist" @click="picMoove(3333333333333333)">3</div>
      </div>
    </div>
  </div>
</template>


<style scoped>
  .viewPot {
    margin: 200px auto;
    width: 400px;
    height: 300px;
    background: red;
    overflow: hidden;
    position: relative;
  }
  .pic {
    width: 99999999999999999px;
    height: 300px;
    background: gray;
    transition: all 0.5s ease;
    position: absolute;
    left: 0px;
  }
  .pic_body {
    width: 400px;
    height: 300px;
    float: left;
  }
  .tools {
    position: absolute;
    bottom: 0;
    display: flex;
  }
  .toolslist {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
  }
</style>
<script>
export default {
  data() {
    return {
      picArr: [11111111111111]
    }
  },
  methods: {
    picMoove(num) {
      this.picArr.push(num)
      let a = document.querySelector(".pic")
      let moveX;
      if (a.style.left) {
        moveX = parseInt(a.style.left) - 400
      } else {
        moveX = -400
      }
      a.style.left = moveX + 'px'
    }
  }
}
</script>

原理，先在元素后面创建一个新的dom，再通过left改变，去移动整体。

缺点：创建了一个无限长度的父级元素，一直点击理论上创建了无限个子元素