vue中swiper使用(vue中使用swiper6)

vue2项目中swiper.js的使用

swiper.js的使用

官网API：

官网轮播图：

接下来介绍如何在vue2中使用swiper.js

1.安装并引入css

npm我swiper@5

//main.js//引入swiper.cssimport'swiper/css/swiper.css';

2.组件中使用：引入js，引入html结构

从'swiper'导入Swiper

html结构：

1、先放置一张占据位置确定布局，然后将改成如下结构

2.注意最外层的class='swiper-container'是必须的！并且后续的swiper实例也必须更改！

divclass='swiper-container'divclass='swiper-wrapper'divclass='swiper-slide'v-for='bannerList中的(img,index)':key='index'img:src='img.imgUrl'//div/divdivclass='swiper-button-next'/divdivclass='swiper-button-pv'/divdivclass='swiper-pagination'/div/div

3.最后一个关键是创建swiper实例！有两种方法

方法一：

如果已经固定，则直接在mounted函数中创建

Mounted(){//下面是一个普通的swiper模板newSwiper('.swiper-container',{Loop:true,mousewheel:true,Keyboard:true,navigation:{nextEl:'.swiper-button-next',pvEl:'.swiper-按钮-pv',},pagination:{el:'.swiper-pagination',},});}

方法二：

v-for用于遍历url数组，那么必须使用watch+$nextTick

5.11.1watch+$nextTick

当某个数据发生变化时，此时DOM还没有更新，所以在监听属性中的handle函数中写一个$nextTick就可以执行数据变化后DOM更新后的代码。

回到swiper，此时我们创建了一个swiper实例

bannerList：url数组

watch:{bannerList:{handler(){this.$nextTick(function(){newSwiper('.swiper-container',{loop:true,mousewheel:true,keyboard:true,navigation:{nextEl:'.swiper-button-next',pvEl:'.swiper-button-pv',},pagination:{el:'.swiper-pagination',},});})}}},

5.11.2修改分页器样式

1.添加属性

pagination:{el:'.swiper-pagination',clickable:true,BulletClass:'my-bullet',//这个bulletActiveClass:'my-bullet-active',},

2.在组件中编写css

//分页器style.my-bullet{position:relative;display:内联块；宽度：15px；高度：15px；边界半径：100%；背景：黑色；不透明度：0.5；margin:04px;}//选择的分页样式.my-bullet-active{background:#ff6600;不透明度：1;}

5.11.3封装轮播图组件

当需要将变成轮播时，我们可以用Carousel组件替换img标签！

1、Carousel组件需要一个参数：url数组

imgList=[{imgUrl:'.'}{imgUrl:'.'}]

2、将Carousel组件注册为全局组件

//在组件中新建Carousel文件夹//main.jsimportCarouselfrom'@/components/Carousel'Vue.component(Carousel.name,Carousel)

3.Carousel/index.vue

模板divclass='swiper-container'divclass='swiper-wrapper'divclass='swiper-slide'v-for='(img,index)inimgList':key='index'img:src='img.imgUrl'//div/divdivclass='swiper-button-next'/divdivclass='swiper-button-pv'/divdivclass='swiper-pagination'/div/div/templatescriptimportSwiperfrom'swiper'导出默认{name:'Carousel',props:['imgList'],watch:{imgList:{immediate:true,handler(){this.$nextTick(function(){newSwiper('.swiper-container',{loop:true,pagination:{el:'.swiper-pagination'，clickable:true，bulletClass:'my-bullet'，bulletActiveClass:'my-bullet-active'，}，navigation:{nextEl:'.swiper-button-next'，pvEl:'.swiper-button-pv',},});})}}}}/scriptstylelang='less'//分页器style.my-bullet{position:relative;display:内联块；宽度：15px；高度：15px；边框半径：100%;背景：黑色；不透明度：0.5；margin:04px;}//选定的分页器样式.my-bullet-active{background:#ff6600;不透明度：1；}/风格

4.在组件中使用

轮播：imgList='bannerList'/

5.11.4swiper属性

1.divclass='swiper-container'：用于轮播图像的大盒子

2.divclass='swiper-slide'：对于包含的盒子，可以指定大小，那么就会直接适配。或者如果没有指定尺寸，则需要指定图像尺寸。

3.slidesPerView：设置轮播框显示轮播的数量，轮播会被修改以适合轮播框的宽度。

4.slidesPerGroup：切换每次轮播的数量

5、在div中添加类名swiper-no-swipingclass='swiper-slide'：禁用滑动