vue-awesome-swiper导航内容(横向滚动条)与内容是联动的，导航内容始终在可视区域内

需求分析

导航内容(横向滚动条)与内容是联动的，导航内容始终在可视区域内

点击导航tab(猜你想搜)或者左右滑动到猜你想搜或者点击左右按钮到猜你想搜，导航tab(猜你想搜在可视区域内)

安装

npm install vue-awesome-swiper@3 --save-dev

相关问题

实现

<template>
  <div class="recommendPage">
    <div class="tabCon">
      <div
        v-for="(item, index) in menuData"
        :key="index"
        :class="{ activeItem: activeIndex == index }"
        class="tabItem"
        @click="changeTab(index)"
      >
        {{ item.tabName }}
      </div>
    </div>
    <swiper
      :options="swiperOption"
      ref="mySwiper"
      @slide-change="slideChange"
    >
      <swiper-slide v-for="(item, index) in menuData"
        >{{ item.tabName }}内容</swiper-slide
      >
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>
  
  <script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      activeIndex: 0,
      menuData: [
        {
          tabName: "实时热榜",
        },
        {
          tabName: "全搜实时热榜",
        },
        {
          tabName: "猜你想搜-中台",
        },
        {
          tabName: "小说榜",
        },
      ],
      swiperOption: {
        // loop: true,
        // autoplay: {
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  methods: {
    slideChange() {
      console.log("er1111111111111111111111111111", this.$refs.mySwiper.swiper.realIndex);
      const index = this.$refs.mySwiper.swiper.realIndex
      this.activeIndex = index
      this.changeScroll(index)
    },
    changeScroll(index) {
      let mySwiper = this.$refs.mySwiper.swiper;
      const scollDom = document.querySelector(".tabCon");
      console.log("scollDom", scollDom, mySwiper);
      let swiperWidth = scollDom.offsetWidth;
      let scrollItemDom = document.querySelectorAll(".tabItem");
      let DomLen = 0;
      scrollItemDom.forEach((item) => {
        console.log("item.offsetWidth", item.offsetLeft);
        DomLen += item.offsetWidth;
      });
      let maxTranslate = swiperWidth - DomLen;
      let maxWidth = -maxTranslate + swiperWidth / 2;
      let slide = scrollItemDom[index];
      let slideLeft = slide.offsetLeft;
      console.log("slideLeft", slide, slideLeft);
      let slideWidth = slide.clientWidth;
      let slideCenter = slideLeft + slideWidth / 2;
      // 被点击slide的中心点

      scollDom.style.transition = "3s";

      if (slideCenter < swiperWidth / 2) {
        console.log("为0", slideCenter, swiperWidth);
        scollDom.scrollLeft = 0;
      } else if (slideCenter > maxWidth) {
        console.log("最后一个", maxTranslate, maxWidth);
        scollDom.scrollLeft = -maxTranslate;
      } else {
        console.log("居中");
        let nowTlanslate = slideCenter - swiperWidth / 2;
        // mySwiper.setWrapperTranslate(-nowTlanslate);
        console.log("nowTlanslate", nowTlanslate);
        scollDom.scrollLeft = -nowTlanslate;
      }
    },
    changeTab(index) {
      this.$refs.mySwiper.swiper.slideTo(index);
      console.log("this.$refs.mySwiper.swiper", this.$refs.mySwiper.swiper);
    },
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  },
};
</script>
<style lang="scss" scoped>
.tabCon {
  position: relative;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  width: 300px;
  height: 60px;
  margin: auto;
  background: skyblue;
  display: flex;
  white-space: nowrap;
  .tabItem {
    padding: 20px;
  }
  .activeItem {
    border-bottom: 4px solid #333;
  }
}
</style>
<style scoped>
.recommendPage .swiper-container {
  position: relative;
  width: 300px;
  height: 200px;
  background: pink;
}
.recommendPage .swiper-container .swiper-slide {
  width: 100%;
  line-height: 200px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}
</style>    

---

参考