码迷,mamicode.com
首页 > 其他好文 > 详细

vue Swiper使用

时间:2020-04-01 14:53:41      阅读:63      评论:0      收藏:0      [点我收藏+]

标签: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); }); }) }

  

 

vue Swiper使用

标签:active   分页器   col   import   src   margin   contain   min   console   

原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12612281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!