工作中日常笔记，vue中使用swiper插件，在pc端和h5端也是常用的插件，记录下来以便下次查看，避免踩坑。
使用版本
"swiper": "^6.3.5",
"vue-awesome-swiper": "^3.1.3"
安装
cnpm install swiper vue-awesome-swiper --save
引入
main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
使用
在组件中应用，根据具体情况自行配置，具体参考swiper官方文档
<swiper ref="mySwiper" :options="swiperOptions">
<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>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
swiperOptions: {
slidesPerView: 4,//显示个数
direction: 'vertical',
pagination: {
el: '.swiper-pagination'
},
}
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
this.swiper.slideTo(3, 1000, false)
}
<style>
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
实现效果
日常记录一篇笔记，一个工具推荐，虽然浏览量很少，但能够记录下来，就是一种收获。
