vue Swiper使用

Posted 2021-03-02 fanqiuzhuji

 // 引入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);
        });
    })
}