ShowEasyFrontEnd/FrontEnd/components/swiper/mobileFixTopBar.vue

<template>
  <section :class="[
    'swiper-container stickyBar tw-w-full tw-bg-white tw-shadow-[0_1px_2px_rgba(0,0,0,0.1)] md:tw-px-[16px] xl:tw-hidden',
    fixBar
      ? 'tw-fixed tw-left-0 tw-top-[64px] tw-z-[8] md:tw-top-[72px]'
      : 'tw-hidden',
  ]">
    <div :class="[
      'tw-w-full tw-flex swiper-wrapper tw-px-[25px] tw-py-[12px] md:tw-mx-[40px] md:tw-px-[12px]',
    ]">
    <template v-for="(item, index) in list">
      <a :key="index" v-if="item.show" :class="[
        'swiper-slide crollactive-item tw-body-3 tw-w-fit tw-text-base-tertiary',
        step == item.id ? 'active tw-text-primary-1' : 'tw-text-black',
      ]" href="#" v-scroll-to="{
        el: `#${item.id}`,
        offset: -140,
      }" @click="activeStep(item.id)">{{ $t(item.title) }}</a></template>
    </div>
  </section>
</template>
<script>
import Swiper from "swiper/bundle";
export default {
  components: {
    Swiper,
  },
  props: {
    fixBar: {
      type: Boolean,
    },
    currStep: {
      type: String,
    },
    list: {
      type: Array,
    },
  },
  data() {
    return {
      stickySwiper: null,
      step: '',
      click: false,
    };
  },
  watch: {
    currStep: {
      handler: function () {
        if (!this.click) {
            this.step = this.currStep;
          }
      }
    }
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.stickySwiper = new Swiper(".swiper-container.stickyBar", {
        observer: true,
        observeParents: true,
        slidesPerView: 3,
        breakpoints: {
          // when window width is >= 768px
          768: {
            slidesPerView: 5,
          },
        },
      });
      vm.stickySwiper.init();
      vm.stickySwiper.update();
    });
  },
  methods: {
    slideTo(index) {
      if (!this.click) {
        this.stickySwiper.slideTo(index);
      }
    },
    activeStep(id) {
      this.click = true;
      this.step = id;
      setTimeout(() => {
        this.click = false;
      }, 300)
    }
  },
};
</script>
<style lang="scss" scoped>
.swiper-slide {
  margin-right: 20px;
}

.active {
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -12px;
    width: 100%;
    height: 2px;
    background-color: #f48800;
  }
}
</style>