vue点击左右按钮内容滑动

image.png

需求

点击下一个，显示3的下一个数字4，这个时候的内容为 234，接着点击上一个，显示2的上一个数字1，这个时候的内容为123。

代码

template

<div class="a2">
  <div class="aa1" :style="{'margin-left': num * 20 + 'px','transition': 'all .3s ease-out .1s',}">
    <div class="aa11" v-for="(item,index) in aa" :key="index">
      <div>{{ item }}</div>
    </div>
  </div>
</div>
<button @click="prev">上一个</button>
<button @click="next">下一个</button>

script

export default {
  data(){
    return {
      num: 0,
      aa: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
    }
  },
  methods: {
    prev(){
      if (this.num < 0) {
        this.num += 1;
      }
    },
    next(){
      if (this.num > -(this.aa.length + this.num)) {
        this.num -= 1;
      }else if(this.num < -(this.aa.length + this.num) && -(this.aa.length + this.num) != -0){
        this.num -= 1;
      }
    }
  },
}

css

.a2{
  background: plum;
  width: 60px;
  overflow: hidden;
}
.aa1{
  display: flex;
  border: 1px solid red;
}
.aa11{
  width: 20px;
  border: 1px solid red;
  margin-right: 10px;
}