标签：active 分页器 col import src margin contain min console
// 引入swiper组件 import Swiper from "swiper"; import "swiper/dist/css/swiper.min.css";
<div class="tuimg">
<!-- swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperList" v-if="index <= 4">
<img :src="item.img" alt />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
.tuimg { width: 6.9rem; /* height: 2.8rem; */ margin: 0 auto; margin-top: 0.2rem; margin-bottom: 0.2rem; } tuimg img { width: 6.9rem; height: 2.8rem;
}
data() {
return {
swiperList: [
{
img: ‘../../../static/img/weitu2x.png‘,
},
{
img: ‘../../../static/img/weitu2x.png‘,
},
{
img: ‘../../../static/img/weitu2x.png‘,
},
{
img: ‘../../../static/img/weitu2x.png‘,
},
{
img: ‘../../../static/img/weitu2x.png‘,
},
],
}
},
mounted() {
this.$nextTick(() => {
// swiper函数
var mySwiper = new Swiper(".swiper-container", {
// 如果需要分页器
pagination: {
el: ".swiper-pagination"
},
// 自动轮播
autoplay: true
});
//监听事件
mySwiper.on(‘slideChange‘, function () {
console.log(this.activeIndex);
});
})
}
标签：active 分页器 col import src margin contain min console
原文地址：https://www.cnblogs.com/fanqiuzhuji/p/12612281.html
