vue2项目中使用swiper插件
在昨天码完上一篇文章后,突然想起来自己写vue项目时,用的轮播都是element-uI里的。并不是说element-uI里的不好用,但毕竟swiper人家是专业的。
安装步骤
- 首先简单创建一个vue2项目,配置什么的我都是随便选的,具体使用时还是要以项目要求为准;
vue create test_demo
- 然后就是通过node来安装swiper插件。这里需要注意的是,swiper默认的话,安装是最新版的swiper7。虽然说swiper7中新增了许多轮播效果,但日常开发中一般都是使用swiper3来进行(看个人爱好和项目要求),所以我们这里安装是需要带上版本号(swiper最后更新版本为3.4.2):
npm install swiper@3.4.2 --save
安装完成后可以在package.json文件中查看版本号(其他插件都是如此)
创建自定义组件
- 在compents目录下为swiper单独创建一个文件夹,并根据需要添加相应文件:
- 在对应的.vue文件中引入相应的js和css文件:
<script>
import swiper from "swiper";
</script>
<style scoped>
@import "../../../node_modules/swiper/dist/css/swiper.css";
</style>
- 简单设置容器和轮播内容:
<template>
<!--基础存放容器-->
<div class="swiper-container">
<!-- 需要进行轮播的部分 -->
<div class="swiper-wrapper">
<!-- 每个节点 -->
<div class="swiper-slide">
<img src="./image/banner (1).jpg" alt="图片1" />
</div>
<div class="swiper-slide">
<img src="./image/banner (2).jpg" alt="图片2" />
</div>
<div class="swiper-slide">
<img src="./image/banner (3).jpg" alt="图片3" />
</div>
</div>
<!--如果需要使用分页器-->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- 如果需要使用前进后退按钮 -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
</template>
- 简单设置样式:
<style scoped>
@import "../../../node_modules/swiper/dist/css/swiper.css";
.swiper-container {
width: 1000px;
height: 450px;
margin-top: 40px;
}
.swiper-slide img {
width: 100%;
object-fit: cover;
}
</style>
- 创建swiper对象,设置相应属性,并在mounted钩子中调用方法(如果数据是动态获取的,还需要根据情况使用async和await),对应属性的使用可以参照官方文档。演示如下:
<script>
import swiper from "swiper";
export default {
name: "",
data() {
return {};
},
mounted() {
this.initSwiper();
},
methods: {
initSwiper() {
new Swiper(".swiper-container", {
//设置轮播的循环方式
loop: true,
//设置自动播放间隔时间
autoplay: 2000,
// 轮播效果,默认为平滑轮播
effect: "slide",
//分页器
pagination: ".swiper-pagination",
//前进后退按钮
prevButton: ".swiper-button-prev",
nextButton: ".swiper-button-next",
// 用户中断轮播后续播
autoplayDisableOnInteraction: false,
});
},
},
};
</script>
调用使用
在需要使用的文件中引用:
<template>
<div class="home">
<h1 align="center">Swiper插件</h1>
<swiperVue />
</div>
</template>
<script>
import swiperVue from "../components/Swiper/swiper";
export default {
name: "Home",
components:{
swiperVue
}
};
</script>
效果展示
实际上和在html中使用没有多大的区别,主要还是vue组件的知识。
这里是万物之恋,我们下次再见了!