移动端左右滑动切换图标

<template>
	<view class="triangle-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <view v-for="(item, index) in transitionsList" :key="index" class="main" :style="item" >
      <view class="content">
        {{ contentList[index] }}
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        transitionsList:[
          "top:0;left:50%; transform: translate(-50%);border: 4px solid #5290c5; color:#5290c5; transition: all linear .5s;",
          "top:25%;left:0; opacity: 0.5; transform: scale(0.7); transition: all linear .5s;",
          "top:55%;left:10%; opacity: 0.3; transform: scale(0.5); transition: all linear .5s;",
          "top:55%;right:10%;  opacity: 0.3; transform: scale(0.5); transition: all linear .5s;",
          "top:25%;right:0; opacity: 0.5; transform: scale(0.7); transition: all linear .5s;"
        ],
        contentList:["学习园地","审批记录","基本信息","工作履历","绩效考核",],
        currentIndex: 0,
        startX: 0,
        startY: 0,
			}
		},
		methods: {
			handleTouchStart(event) {
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
      },
      handleTouchMove(event) {
        event.preventDefault();
      },
      handleTouchEnd(event) {
        var deltaX = event.changedTouches[0].clientX - this.startX;
        var deltaY = event.changedTouches[0].clientY - this.startY;
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX > 0) {
            // 右滑，切换到前一个图标
            this.currentIndex = (this.currentIndex - 1 + this.transitionsList.length) % this.transitionsList.length;
            this.rightTransLate()
          } else {
            // 左滑，切换到后一个图标
            this.currentIndex = (this.currentIndex + 1) % this.transitionsList.length;
            this.leftTransLate()
          }
        }
      },
      leftTransLate() {
        const firstElement = this.transitionsList.shift();
        this.transitionsList.push(firstElement); 
      },
      rightTransLate() {
        const lastElement = this.transitionsList.pop();
        this.transitionsList.unshift(lastElement);
      }
		}
	}
</script>

<style lang="scss" scoped>

	.triangle-container {
	  position: relative;
	  width: 300px;
	  height: 500px;
	  margin: 210px auto; 
	}
	
	.main {
	  position: absolute;
	  width: 80px;
	  height: 80px;
	  transform-origin: center center;
    text-align: center;
    line-height: 80px;
    border-radius: 35%;
    color: black;
	}
	
	.main:nth-child(1) {
    // background-color: #ca4a4a;
    background: url("@/static/images/yuyue.png") no-repeat center center / cover
	}
	
	.main:nth-child(2) {
    background: url("@/static/images/bg1.png") no-repeat center center / cover;
    // background-color: #174d79;
	}
	
	.main:nth-child(3) {
    background: url("@/static/images/pc2.png") no-repeat center center / cover;
    // background-color: #0c3aef;
	}
  .main:nth-child(4) {
    background: url("@/static/images/pc1.png") no-repeat center center / cover;
    // background-color: #0a0d1c;
	}
  .main:nth-child(5) {
    background: url("@/static/images/bg2.png") no-repeat center center / cover;
    // background-color: #6d1169;
	}
  .content {
    font-size: 18px;
    margin-top: 80%;
  }
</style>