vue使用Swiper+自定义分页器（导航）

结构⬇

<template>
  <div class='home'>
    <swiper class="swiper-no-swiping" ref="mySwiper" :options="swiperOptions" :auto-update="true" :auto-destroy="true" :delete-instance-on-destroy="true" :cleanup-styles-on-destroy="true">
      <swiper-slide >
        <ComprehensiveAnalysis class="comprehensive page" />
      </swiper-slide>
      <swiper-slide>
        <BridgeStructure class="bridge page" />
      </swiper-slide>
      <swiper-slide>
        <OperationMonitoring class="operation page" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" />
    </swiper>
    <CircleMenu class="menu" :selfObj="selfObj"/>
  </div>
</template>

js⬇

<script>

import OperationMonitoring from "./operationMonitoring/index.vue";
import ComprehensiveAnalysis from "./comprehensiveAnalysis/index.vue";
import BridgeStructure from "./bridgeStructure/index.vue";
import CircleMenu from "@/components/CircleMenu/index.vue"
export default {
  components: {
    OperationMonitoring,
    ComprehensiveAnalysis,
    BridgeStructure,
    CircleMenu
  },
  data () {
    return {
      selfObj: this,
      swiperOptions: {
        noSwiping: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: false,
        },
        // Some Swiper option/callback...
      }
    };
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  watch: {},
  methods: {
  },
  created () {
  },
  mounted () {
    console.log('Current Swiper instance object', this.swiper)
    this.swiper.slideTo(1, 1000, false)
  },
} 
</script>

结构样式这块跟官网的没啥区别，就是加了不可点击下面的切换和不可拖动切换，因为我主要想实现的是我的环形菜单导航的切换功能中能有滑动的效果。

分页器组件⬇

<!--  -->
<template>
  <div class='circle-menu'>
    <div class="pie">
      <div class="slice one" @click="handleClick(1)">
        <div class="wrapper">
          <!-- <div class="wrapper-icon">
            <i class="iconfont icon-qiaoliang"></i>
          </div> -->
          <div class="wrapper-text">
            桥梁<br>结构
          </div>
        </div>

      </div>
      <div class="slice two" @click="handleClick(2)">
        <div class="wrapper">
          <!-- <div class="wrapper-icon"></div> -->
          <div class="wrapper-text">
            综合<br>分析
          </div>
        </div>
      </div>
      <div class="slice three" @click="handleClick(3)">
        <div class="wrapper">
          <!-- <div class="wrapper-icon"></div> -->
          <div class="wrapper-text">
            运营<br>监控
          </div>
        </div>
      </div>
    </div>
    <div class="circle-out">
      <div class="circle-inner"></div>
    </div>

  </div>
</template>

<script>

export default {
  components: {},
  props: {
    selfObj: {
      type: Object,
      default: null,
    },
  },
  data () {
    return {

    };
  },
  computed: {
    swiper () {
      return this.selfObj.$refs.mySwiper.$swiper
    }
  },
  watch: {
    selfObj (val) {
      if (val) {
        this.selfObj = val
      }

    }
  },
  methods: {
    handleClick (type) {
      const self = this
      switch (type) {
        case 1:
          self.swiper.slideTo(0, 1000, false)
          break;
        case 2:
          self.swiper.slideTo(1, 1000, false)
          break;
        case 3:
          self.swiper.slideTo(2, 1000, false)
          break;
      }
    }
  },
} 
</script>
<style lang='scss' scoped>
.circle-menu {
  width: 250px;
  height: 250px;
  position: relative;
  &:hover {
    .pie {
      transform: translate(0);
    }
  }
  .pie {
    width: 100%;
    height: 100%;
    transform: translate(100%);
    transition: transform 0.35s ease;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    .slice {
      width: 50%;
      height: 50%;
      transform-origin: 0% 100%;
      position: absolute;
      top: 0;
      cursor: pointer;
      // border: 1px solid #fff;
      // background-color: rgba($color: #000, $alpha: 0.5);
      background-color: #307cea;
      // opacity: 0.8;
      // transform: rotate(30deg);
      .wrapper {
        font-size: 16px;
      }
    }
    .one {
      transform-origin: 100% 100%;
      transform: rotate(30deg) skewY(0deg);
      .wrapper {
        transform: translate(30px, 40px) rotate(-30deg);
      }
    }
    .two {
      transform-origin: 100% 100%;
      transform: rotate(-60deg) skewY(30deg);
      .wrapper {
        transform: translate(55px, 89px) rotate(49deg) skew(6deg);
      }
    }
    .three {
      transform-origin: 100% 100%;
      transform: rotate(-120deg) skewY(0deg);
      .wrapper {
        transform: translate(-5px, 72px) rotate(120deg) skew(0deg);
      }
    }
  }
  .circle-out {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #7cfffa;
    border-radius: 50%;
    // border: 2px solid transparent;
    width: 40%;
    height: 40%;
    cursor: pointer;
    .circle-inner {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      border-radius: 50%;
      // border: 2px solid transparent;
      width: 80%;
      height: 80%;
    }
  }
}
</style>

注意点⬇

每个按钮增加点击事件⬆

点击后切换到对应界面⬆

自制的导航按钮⬆
画扇形画了半天，就是中间那个字体好像因为被倾斜所以有问题，后面再解决

如有问题可回复交流