关于在VUE中封装一个Swiper组件的方法-----详解(亲测有效)

1.打开项目的根目录，然后打开命令窗口，引入swiper组件
npm install --save swiper@5.4.5 (@后为指定版本号，可写可不写,下面同理)

cnpm i swiper@5.4.5 -S
1
2
3
2.在src/components下创建一个Swiper.vue的文件夹,用来存储公共部件

3.书写公共样式 Swiper.vue中书写a,b
a.记得留好slot插槽

1 2 3 4 5 6 7 b.引入Swiper 和它的css文件 插槽工作后要进行new Swiper,然后引入.swiper-container

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 4.将封装的组件引入至要使用的页面中 我的文件在src/views/Film.vue文件,在该文件中引入Swiper

import swiper from ‘@/components/Swiper’
1
5.代入组件
我的是个局部组件,也可以定义全局组件

components:{
swiper //局部注册swiper组件
}
1
2
3
定义全局,这样别的页面不用引入,直接swiper标签即可,同时记得删除局部

import Vue from ‘vue’
Vue.component(“swiper”,swiper) //全局注册swiper组件
1
2
6.创建页面

11111

22222

33333

1
2
3
4
5
解决轮播第二张划不动的小问题

7. 创建src/views/Datail.vue,在新页面创建一页两张图的轮播
   引入的是局部组件的话:重复步骤四 , 步骤五
   引入的是全局组件的话:直接进入
   8.我们发 现新建的文件所需要的文件不能写死在swiper组件中,否则会应影响Film.vue的轮播
   以下为错误写法

mounted(){
new Swiper(".swiper-container",{
slidesPerView: 3,
spaceBetween: 30,
freeMode: true
})
}
1
2
3
4
5
6
7
9.我们可以在Datail中的swiper标签中自定义一个属性
//惯性滑动

1
2
3
4
5
10.在swiper文件中 props接受传过来属性 再拼接至new swiper,就成功了
在这里插入图片描述

10,我们怎么在同一页面引入两个不同效果的swiper效果
同样,我在Datail中想要引入一个一页两张的轮播效果
错误写法

//惯性滑动

1
2
3
4
5
错误效果:由于swiper中每次传入的.swiper-container都是固定的,所以会对Datail文件中的属性值起到混乱渲染的不利影响(重名影响)
在这里插入图片描述

11,所以也要对class控制,传参,给两个轮播分别加上写死的class名
在这里插入图片描述在这里插入图片描述

12.用swiper中的options接收variableclass,在最大的div中再加上class(动态绑定)
在这里插入图片描述

在这里插入图片描述

13.有变量,所以在new Swiper中进行拼接, Datail中的两个文件互不影响,完美运行
mounted(){
new Swiper("."+this.variableClass,this.variableData);
}
}
1
2
3
4
但发现由于Film(/别的页面中)中没有传class,所以该页面的轮播挂掉了,

14.解决方案
解决方案一:给Film所在的swiper标签添加variableClass名(推荐,重复步骤11即可)
解决方案二:在new中进行判断
mounted() {
new Swiper(
“.” + (this.variableClass ? this.variableClass : “swiper-container”),
this.variableData,
{
observer: true //当修改swiper的样式或者子元素时,swiper自动刷新
}
);
}
1
2
3
4
5
6
7
8
9
*这就是关于轮播的由浅至深组件 46–1hour