hjyd/src/views/Index/index.vue

<template>
  <swiper
    id="screen"
    :virtual="true"
    :direction="'vertical'"
    :slidesPerView="1"
    :spaceBetween="0"
    :mousewheel="true"
    :speed="800"
    :pagination="pagination"
    :keyboard="{
      enabled: true,
      onlyInViewport: false,
      pageUpDown: true,
    }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :modules="modules"
    class="home_swiper"
  >
    <swiper-slide :key="0" :virtualIndex="0">
      <HeaderSwiper />
    </swiper-slide>
    <swiper-slide :key="1" :virtualIndex="1">
      <Service />
    </swiper-slide>
    <swiper-slide :key="2" :virtualIndex="2">
      <Cooperation />
    </swiper-slide>
    <swiper-slide :key="3" :virtualIndex="3">
      <CasePictureList />
    </swiper-slide>
    <swiper-slide :key="4" :virtualIndex="4">
      <SoftHardwareSummary />
    </swiper-slide>
    <swiper-slide :key="5" :virtualIndex="5">
      <SoftHardwareDetail />
    </swiper-slide>
    <swiper-slide :key="6" :virtualIndex="6">
      <Culture />
    </swiper-slide>
    <swiper-slide :key="7" :virtualIndex="7">
      <Culture />
    </swiper-slide>
    <swiper-slide :key="8" :virtualIndex="8">
      <CorporateCulture />
    </swiper-slide>
    <swiper-slide :key="9" :virtualIndex="9">
      <VideoPlayer />
    </swiper-slide>
    <swiper-slide :key="10" :virtualIndex="10">
      <ContactUs />
    </swiper-slide>
  </swiper>
</template>
<script>
import { onMounted } from 'vue'
import { useSwiperStore } from '@/store'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// import required modules
import { Mousewheel, Pagination, Virtual, Keyboard } from 'swiper'
// import views to swiper
import Service from '@/views/Index/components/Service'
import HeaderSwiper from '@/views/Index/components/HeaderSwiper'
import VideoPlayer from '@/views/Index/components/VideoPlayer'
import CaseSummary from '@/views/Index/components/CaseSummary'
import CasePictureList from '@/views/Index/components/CasePictureList'
import CaseDetails from '@/views/Index/components/CaseDetails'
import ContactUs from '@/views/Index/components/ContactUs'
import CircuitBoard from '@/views/Index/components/CircuitBoard'
import Culture from '@/views/Index/components/Culture'
import SoftHardwareSummary from '@/views/Index/components/SoftHardwareSummary'
import CorporateCulture from '@/views/Index/components/CorporateCulture'
import SoftHardwarePictureList from '@/views/Index/components/SoftHardwarePictureList'
import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
import Cooperation from '@/views/Index/components/Cooperation'
import { totalPageAni } from '@/common/utils'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/pagination'

export default {
  components: {
    Swiper,
    SwiperSlide,
    ContactUs,
    VideoPlayer,
    CircuitBoard,
    CorporateCulture,
    Culture,
    Cooperation,
    CaseDetails,
    HeaderSwiper,
    Service,
    CaseSummary,
    SoftHardwarePictureList,
    SoftHardwareDetail,
    SoftHardwareSummary,
    CasePictureList,
  },
  setup() {
    const onSwiper = swiper => {
      const swiperStore = useSwiperStore()
      swiperStore.initSwiper(swiper)
    }
    const onSlideChange = swiper => {
      const { activeIndex } = swiper
      const swiperStore = useSwiperStore()
      swiperStore.initSwiper(swiper)
      swiperStore.updateActiveIndex(activeIndex)
      // add animate to some ele
      totalPageAni()
    }
    return {
      onSwiper,
      onSlideChange,
      pagination: {
        clickable: true,
        renderBullet: function (index, className) {
          return '<div class="' + className + '"></div>'
        },
      },
      modules: [Mousewheel, Pagination, Virtual, Keyboard],
    }
  },
}
</script>

<style lang="scss" scoped></style>