Vue中利用swiper实现自动轮播功能

前端工作中轮播图是必不可少的，最近一个项目需要在vue项目中插入轮播图，很多条数据显示n个，自动向上滚动，无缝连接，以前用过很多次swiper轮播插件，所以立马上手，以为手到擒来，结果。。。

异步获取数据后初始化swiper

new Vue({

                 el: "#networkWarningCounts",

                 data: {

                     items: [],

                     mySwiper: null

                },

                 mounted : function () {

                     this. getList();

                },

                 methods: {

                     getList : function () {

                         var that = this;

                         $. ajax({

                             url: "http://39.104.99.77:8080/brand/selectList",

                             type: 'get',

                             dataType: 'json',

                             success : function ( data) {

                                 console. log( data);

                                 that. items = data. data;

                                 that. $nextTick( function () {

                                     that. initSwiper();

                                })

                            }

                        });

                    },

                     initSwiper : function () {

                             var that = this;

                             this. mySwiper = new Swiper( '.swiper-container', {

                                 direction: 'vertical',

                                 loop: true,

                                 slidesPerView: 5,

                                 spaceBetween: 0,

                                 observer: true, //修改swiper自己或子元素时，自动初始化swiper

                                 observeParents: false,

                                 paginationClickable: true,

                                 autoplay: 1000,

                            })

                    }

                }

            })

注意：autoplay

Swiper3和Swiper4的区别，如果在4中autoplay:true,3中需要设置具体的时间毫秒

提示：看api要看相对应版本的，以免出错