在vue中使用swiper
<template> <div class="main"> <!-- .swiper-container --> <div class="wrap"> <img class="bgImg" src="../../../../assets/images/fffbg.png" alt /> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(item,index) in swiperList " :key="index"> <div class="img1"> <img :src="item.img" alt /> </div> </swiper-slide> </swiper> </div> </div> </template> <script> export default { name: "swiperList", data() { return { activeId: 0, /// 当前轮播图的序号 swiperOption: { slidesPerView: 3, spaceBetween: 20, centeredSlides: true, loop: false, initialSlide :1, /// 默认页 pagination: { // el: ".swiper-pagination", // clickable: true }, on: { // 当轮播时触发 slideChange: e => { let swiper = this.$refs.mySwiper.swiper; let i = swiper.activeIndex; this.activeId = i; console.log(i); /// 轮播的序号从 0 开始 this.$emit("handleChangeId", i); } } } }; }, props: { swiperList: { type: Array, default: () => {} } }, methods: { changId() { console.log("kkk"); }, callback() { console.log("毁掉"); } }, created() {} }; </script> <style lang="less" scoped > .main { padding: 0; // height: 6rem; // padding-top: 3rem; overflow: hidden; position: relative; top: 0; left: 0; } .main .wrap { width: 100%; padding-bottom: 0.9rem; .bgImg { display: block; width: 100%; position: absolute; top: 0.9rem; left: 0; } // height: 6rem; // background: url("../../../../assets/images/fffbg.png") center -7.8rem // no-repeat; // padding-bottom: .3rem; } // swiper-slide-active .img1 { width: 100%; height: 3.5rem; background-color: #999; background-size: cover; img { display: block; width: 100%; height: 100%; } } .img2 { width: 100%; height: 3.5rem; // background-color: pink; } .img3 { width: 100%; height: 3.5rem; background-color: blue; } .main /deep/ .swiper-slide { transition: 300ms; transform: scale(0.8); } .main /deep/ .swiper-slide-active { transform: scale(1); } .main /deep/ .swiper-container { overflow: visible; width: 100%; height: 3.5rem; } .main /deep/ .swiper-slide-next { margin-right: 0 !important; } </style>
