使用swiper7的一些记录

第一次用swiper7+vue3+ts 一些使用记录，防止以后忘了

1. 第一步install
   • npm i swiper@7 在文件目录安装swiper
   • 安装完成之后node_modules里面会有这个包，内部有vue，react等不同的模块可以选择，我们这里选择vue,导入vue组件 import { Swiper, SwiperSlide } from 'swiper/vue';
     • 通过defineComponents({Swiper, SwiperSlide })进行注册组件
     • 这里如果用到其他扩展模块，需要引入 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
     • Navigation 配置指示器
     • Pagination 配置翻页器
     • Scrollbar 滚动条
     • A11y 这个不太了解，知道的可以告诉我
     • 这里用项目里的一段代码展示

          <swiper
           :slides-per-view="5"
           :space-between="10"
           :navigation="{
             prevEl: '.swiper-button-prev',
             nextEl: '.swiper-button-next',
           }"
           :modules="modules"
           loop
         >
           <swiper-slide v-for="(item, index) in honnerData" :key="index"
             ><router-link
               :to="{
                 path: '/Honor/honner/Details',
                 query: {
                   contentId: item.contentId,
                   id: 'hj',
                 },
               }"
             >
               <img
                 style="height: 150px; width: 190px"
                 :src="pictureUrl + item.filePath"
               />
               <p>{{ item.title }}</p>
             </router-link></swiper-slide
           >
         </swiper>
     

   • 内部对引入css的路径进行了更改，可以在package.json中查看，这里我们一般导入import 'swiper/css',
   • 如果用ts写的需要好像要声明模块，在env.d.ts中书写

   declare module 'swiper' {
     export const Swiper: any
     export const Navigation: any
     export const Pagination: any
     export const Scrollbar: any
     export const A11y: any
   }
   

   • 至此基本的swiper7的使用就完成了。