hk-school/src/components/NavigationBar.vue

<template>
  <div class="bar" :class="{ show }">
    <img class="close" :src="closeICON" @click="toggleMenu" />
    <Swiper
      :slides-per-view="slidePreview"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :modules="modules"
      :pagination="{ el: '.pagination', type: 'bullets' }"
      :grabCursor="true"
      :space-between="0"
      :freeMode="true"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <template v-for="item in lists">
        <SwiperSlide @click="handleClick(item)">
          <div class="cover">
            <img :src="`${imagePath}${item.cover}`" />
          </div>
          <div class="desc">
            <span class="cap">{{ item.zhName }}</span>
            <span class="sub">{{ item.enName }}</span>
          </div>
        </SwiperSlide>
      </template>
    </Swiper>
    <div
      class="swiper-button swiper-button-next"
    >
    </div>
    <div
      class="swiper-button swiper-button-prev"
    >
    </div>
  </div>
</template>


<script setup>
import { ref, inject, computed } from "vue";
import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
import { Navigation } from 'swiper/modules';
import closeICON from '../assets/cloes.png'
import 'swiper/less/navigation';
import 'swiper/less/pagination';
import "swiper/css";
import { onMounted, onUnmounted } from "vue";

const data = inject("data");
const emits = defineEmits(["changeScene","toggleMenu"]);
const swiper = ref(null);
console.log("useSwiper", swiper, useSwiper);
const imagePath = ref(import.meta.env.VITE_COVER_DIR);

defineProps({
  show: {
    type: Boolean,
    default: () => false,
  },
});

const lists = computed(() =>
  Array.from(data.value).filter((item) => item.type === "scene")
);
const modules = [Navigation]
const slidePreview = ref(5);
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev ",
//   hideOnClick: true,
});
const handleWindowResize = () => {
  const innerWidth = window.innerWidth;
  const pre = Math.ceil(innerWidth / 280);
  console.log("slidePreview", pre);
  slidePreview.value = pre;
};
const handleClick = (item) => {
  emits("changeScene", item);
};
const toggleMenu = () => {
    emits('toggleMenu')
}
onMounted(() => {
  window.addEventListener("resize", handleWindowResize, false);
  handleWindowResize();
});
onUnmounted(() => {
  window.removeEventListener("resize", handleWindowResize, false);
});

const onSwiper = (swiper) => {
  console.log('onSwiper',swiper);
  swiper.value = swiper;
};
const onSlideChange = () => {
  console.log("slide change");
};
</script>

<style scoped lang="scss">
.bar {
  position: fixed;
  z-index: 10;
  bottom: -100%;
  left: 0;
  width: calc(100% - 30px);
  height: 206px;
  padding-right: 15px;
  padding-left: 15px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  transition: bottom 0.2s ease-in-out;
//   .swiper-button {
//     position: absolute;
//     top: 60px;
//     cursor: pointer;
//   }
  &.show {
    bottom: 0;
  }
  .close{
    position: absolute;
    right: 5px;
    top: 4px;
    width: 18px;
    cursor: pointer;
    z-index: 10;
  }

  &::before {
    content: " ";
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 146px;
    background: rgba(1, 144, 64, 0.9);
  }

  &::after {
    content: " ";
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    .cover {
      width: 230px;
      height: 117px;
      margin-top: 20px;
      margin-bottom: 10px;
      overflow: hidden;
      border-radius: 5px;

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }

    .desc {
      width: 230px;
      height: 60px;
      color: black;
      text-align: left;
      display: flex;
      flex-direction: column;

      span.cap {
        font-size: 16px;
        font-weight: bold;
        margin-top: 5px;
      }

      span.sub {
        font-size: 13px;
        text-wrap: nowrap;
        font-weight: normal;
      }
    }
  }
}
</style>