vue swiper 循环滚动_swiper循环滚动

1. 引入swiper
   index.html

 <link rel="stylesheet" href="static/lib/swiper-3.4.2.min.css">
 <script type="text/javascript" src="static/lib/swiper-3.4.2.jquery.min.js"></script>
1
2

2. 编写html界面

 <!--轮播图-->
<div class="swiper-container">
    <div class="swiper-wrapper"><!-- @click="product_introduction" -->
        <div class="swiper-slide" v-for="item in advInfo"><img :src="item.image" alt=""/></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
 
1
2
3
4
5
6
7
8

3. swiper配置

   methods: {
    initSwiper () {
          var banner = new Swiper(".swiper-container",{
            direction:"horizontal",//设置滚动方向
            autoplay:2000,//设置切换间隔事件
            loop: true, // 循环模式选项
            pagination:".swiper-pagination",//设置分页器的class名
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
            paginationClickable:true,//设置分页器是否可以点击
          })

        },
      },
//    获取轮播图数据
      created(){
          this.$http.get(local_hosts + "/banners/bannerList",{
              params:{

              }
          }).then(function(res){
                this.advInfo = res.data.data.currentUser;
                // for(var f = 0;f < this.advInfo.length;f++){
                //   this.jumpPage = this.advInfo[f].jumpPage;
                // }

            this.$nextTick(() => {
              this.initSwiper()
            })

          },function (err) {
            console.log(err)
          })
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

注意：如果swiper的数据是动态获取的，必须要在网络请求返回后加
this.$nextTick(() => {
this.initSwiper()
})