【无标题】

vue内容切换

<template>
  <div class="list-content">
    <div @click="prevImage" style="margin-right: 10px">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
        width="24" height="24" viewBox="0 0 24 24">
        <defs>
          <clipPath id="master_svg0_693_03703">
            <rect x="24" y="0" width="24" height="24" rx="0" />
          </clipPath>
        </defs>
        <g transform="matrix(-1,0,0,1,48,0)" clip-path="url(#master_svg0_693_03703)">
          <g>
            <path
              d="M43.82798828125,10.38513C43.82798828125,10.38513,30.07849828125,2.25655,30.07849828125,2.25655C28.96135828125,1.59642,27.25048828125,2.2370200000000002,27.25048828125,3.86977C27.25048828125,3.86977,27.25048828125,20.123,27.25048828125,20.123C27.25048828125,21.5878,28.84026828125,22.4706,30.07849828125,21.7362C30.07849828125,21.7362,43.82798828125,13.6116,43.82798828125,13.6116C45.05448828125,12.8889,45.058388281250004,11.10775,43.82798828125,10.38513C43.82798828125,10.38513,43.82798828125,10.38513,43.82798828125,10.38513C43.82798828125,10.38513,43.82798828125,10.38513,43.82798828125,10.38513Z"
              fill="#59AAFF" fill-opacity="1" />
          </g>
        </g>
      </svg>
    </div>
    <div class="content-box">
      <transition name="image-fade" mode="out-in">
        <div :key="currentIndex" style="display: flex; width: 100%">
          <div v-for="(item, index) in listData[currentIndex]" :key="index" class="content-item">
            {{ item }}
          </div>
        </div>
      </transition>
    </div>
    <div @click="nextImage" style="margin-left: 10px">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
        width="24" height="24" viewBox="0 0 24 24">
        <defs>
          <clipPath id="master_svg0_693_03702">
            <rect x="0" y="0" width="24" height="24" rx="0" />
          </clipPath>
        </defs>
        <g clip-path="url(#master_svg0_693_03702)">
          <g>
            <path
              d="M19.82798828125,10.38513C19.82798828125,10.38513,6.07849828125,2.25655,6.07849828125,2.25655C4.96135828125,1.59642,3.25048828125,2.2370200000000002,3.25048828125,3.86977C3.25048828125,3.86977,3.25048828125,20.123,3.25048828125,20.123C3.25048828125,21.5878,4.84026828125,22.4706,6.07849828125,21.7362C6.07849828125,21.7362,19.82798828125,13.6116,19.82798828125,13.6116C21.05448828125,12.8889,21.05838828125,11.10775,19.82798828125,10.38513C19.82798828125,10.38513,19.82798828125,10.38513,19.82798828125,10.38513C19.82798828125,10.38513,19.82798828125,10.38513,19.82798828125,10.38513Z"
              fill="#59AAFF" fill-opacity="1" />
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [[1,2,3],[4,5,6],[7,8,9]],
      currentIndex: 0,
    };
  },
  methods: {
    prevImage() {
      this.currentIndex =
        (this.currentIndex - 1 + this.listData.length) %
        this.listData.length;
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.listData.length;
    },
  },
};
</script>

<style  lang="scss" scoped>
.list-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  .content-box {
    display: flex;
    justify-content: space-between;

    width: 350px;
    height: 87px;

    .content-item {
      height: 87px;
      width: 97px;
      background: rgba(108, 89, 255, 0.52);
      border-radius: 4px;
      font-size: 30px;
      color: #f9f9f9;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .content-item:not(:first-child) {
      margin-left: 30px;
    }
  }
}

.image-fade-enter-active,
.image-fade-leave-active {
  transition: opacity 0.5s;
}

.image-fade-enter,
.image-fade-leave-to {
  opacity: 0;
}
</style>