vue Swiper使用
// 引入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); }); }) }