vue怎么使用ajax的流程（vue3中使用swiper完整版教程）

介绍

在 vue3 中使用 swiper, 实现轮播图的效果；如果组件样式等模块引入不当
  
  
  
  
  ，很有可能导致  
  
  
  
  
 ，页面无效果；或者想要的箭头或者切换效果异常问题
  
  
  
  
  。具体使用方式如下所示：

使用方式

使用命令 npm install swiper 安装 swiper插件； 在main.js里使用样式文件
 


 


 


 


 


，如下所示： import App from ./App.vue import router from ./router import VueAwesomeSwiper from vue-awesome-swiper; import swiper/css; createApp(App).use(VueAwesomeSwiper).use(router).mount(#app) 在使用的页面
 
 
 
 
 ，引入需要使用到的组件   
   
   
   
   
 ，比如常用的左右切换箭头
 

 

 

 

 

，小圆点指示器等；如下所示： import { Swiper, SwiperSlide } from swiper/vue // 引入swiper样式（按需导入） import swiper/css/pagination // 轮播图底面的小圆点 import swiper/css/navigation // 轮播图两边的左右箭头 // import swiper/css/scrollbar // 轮播图的滚动条

 

 

 

 

 ， 轮播图里一般不怎么会使用到滚动条           ，如果有用到的话import导入就行 // 引入swiper核心和所需模块 import { Autoplay, Pagination, Navigation, Scrollbar } from swiper const navigation = ref({ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }); // 在modules加入要使用的模块 const modules = [Autoplay, Pagination, Navigation, Scrollbar] const prevEl = (item, index) => { // console.log(上一张 + index + item) }; const nextEl = () => { // console.log(下一张) }; // 更改当前活动swiper const onSlideChange = (swiper) => { // swiper是当前轮播的对象
 
 

 
 

 
 

 
 

 
 

，里面可以获取到当前swiper的所有信息









，当前索引是activeIndex console.log(swiper.activeIndex) } 在页面中使用组件和相关的模块 <swiper :modules="modules" :loop="true" :slides-per-view="1" :space-between="50" :autoplay="{ delay: 4000, disableOnInteraction: false }" :navigation="navigation" :pagination="{ clickable: true }" :scrollbar="{ draggable: false }" class="swiperBox" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <div class="swiper-button-prev" @click.stop="prevEl(item, index)" /> <!--左箭头  
  
  
  
  
 。如果放置在swiper外面                ，需要自定义样式
 


 


 


 


 


。--> <div class="swiper-button-next" @click.stop="nextEl" /> <!--右箭头
 
 
 
 
 。如果放置在swiper外面 
 
 
 
 
 
 
 
 
 
，需要自定义样式   
   
   
   
   
 。--> <!-- 如果需要滚动条 --> <!-- <div class="swiper-scrollbar"></div> --> </swiper>

参数介绍：

modules：

loop： 是否循环播放

slides-per-view：控制一次显示几张轮播图

space-between： 每张轮播图之间的距离















，该属性不可以和margin 属性同时使用；

autoplay： 是否自动轮播          ， delay为间隔的毫秒数；disableOnInteraction属性默认是true  
 
  
 
  
 
  
 
  
 
 ，也就是当用户手动滑动后禁用自动播放










， 设置为false后
  
  
  
  
  ，将不会禁用  
  
  
  
  
 ，会每次手动触发后再重新启动自动播放
 

 

 

 

 

。

navigation： 定义左右切换箭头

pagination： 控制是否可以点击圆点指示器切换轮播

scrollbar： 是否显示轮播图的滚动条
 


 


 


 


 


， draggable设置为 true就可以拖动底部的滚动条（轮播当中
 
 
 
 
 ，一般不怎么会使用到这个属性）