Vue2中使用swiper、vue-awesome-swiper制作轮播图
版本问题：
- 非常重要： 版本选错了，运行会报各种bug，很恶心
- 最新版本的swiper6适合在vue3中使用，在vue2中使用会出现很多bug
- 这里使用的swiper和vue-awesome-swiper版本如下：
"vue-awesome-swiper": "^4.1.1",
"swiper": "^5.4.5",
跟这个类似，vue中使用插件，导入依赖时候需要导入适合的版本，不然容易报错
例如：vue2中使用element ui插件是可以的（"element-ui": "^2.15.5"），
而在vue3中使用elementui则应该导入（"element-plus"）,使用上面的element-ui会报错
还有： 导入sass-loader和sass时候也要导入合适的版本：（ "sass": "^1.26.5", "sass-loader": "^8.0.2",）
下面记录一下如何使用swiper制作轮播图：
如下可以复制到组件中尝试：
模板代码
- Home.vue
<template>
<swiper class="swiper" :options="swiperOption">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from ‘vue-awesome-swiper‘
import ‘swiper/css/swiper.css‘
export default {
name: ‘Home‘,
title: ‘Pagination‘,
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOption: {
spaceBetween: 30,
pagination: {
el: ‘.swiper-pagination‘,
clickable: true
},
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘
}
}
}
}
}
</script>
<style lang="scss" scoped>
.swiper {
height: 300px;
width: 100%;
border: 1px transparent solid;
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
font-size: 14px;
background-color: rgb(98, 168, 200);
}
}
</style>
- main.js
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
Vue.use(VueAwesomeSwiper)
结果图：
总结：
在前端学习过程中，使用插件开发会遇到各种版本的问题，这种轮播图用简单的css就可以实现的，花时间去使用别人的组件是得不偿失的，swipper这种复用性不高，之前使用的element ui可以帮助我们节省很多时间去设计样式，对后端人员来说帮助很大。
js对前端学习的人来说非常重要，而且难度也是最大的。
之后我会对js一些难点做一些总结和归纳。