vue,左右滑动动画

效果图：

<template>
  <div>
    <div class="swiper">
      <ul ref="swiper" class="swipero">
        <li
          v-for="(item, index) in items"
          :key="index"
          :class="`${index == active ? 'active' : ''}`"
        >
          <div v-text="item.name"></div>
        </li>
      </ul>
    </div>
    <div @click="next()">下一页</div>
    <div @click="pre()">上一页</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "123" },
        { id: 1, name: "123" },
        { id: 1, name: "123" },
        { id: 1, name: "123" },
        { id: 1, name: "123" },
        { id: 1, name: "123" },
        { id: 1, name: "123" },
      ],
      timer: null,
      active: 0,
      flag: true,
    };
  },
  mounted() {
    // this.swiper();
  },
  methods: {
    // 节流
    throttle(index = true) {
      let self = this;
      if (self.flag) {
        clearTimeout(this.timer);
        self.timer = setTimeout(() => {
          index ? self.active++ : self.active--;
          self.swiper();
          self.flag = true;
        }, 2000);
      }
      this.flag = false;
    },
    next() {
      // 判断是否是最后一个
      if (this.items.length - 2 <= this.active) {
        this.active = this.items.length - 1;
        return;
      }

      this.throttle();
    },
    pre() {
      // 判断是否是第一个
      if (this.active == 0) return;

      this.throttle();
    },
    swiper() {
      let swiper = this.$refs.swiper;
      swiper.style.left = -200 * this.active + "px";
      swiper.style.transition = "all .5s";
    },
  },
};
</script>

<style lang="less" scoped>
.swiper {
  width: 600px;
  height: 400px;
  // overflow: hidden;
  position: relative;
  ul {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    white-space: nowrap;
    li {
      width: 200px;
      height: 200px;
      display: inline-block;
      vertical-align: bottom;
      position: relative;

      transition: all 0.5s;

      > div {
        width: 100%;
        height: 100%;
      }
      &:nth-child(odd) {
        background-color: red;
      }
      &:nth-child(even) {
        background-color: rgb(112, 126, 84);
      }
    }
    .active {
      width: 400px;
      height: 400px;
    }
  }
}
</style>