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

vue

前端工作中轮播图是必不可少的,最近一个项目需要在vue项目中插入轮播图,很多条数据显示n个,自动向上滚动,无缝连接,以前用过很多次swiper轮播" title="swiper轮播">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要看相对应版本的,以免出错

以上是 Vue中利用swiper实现自动轮播功能 的全部内容, 来源链接: utcz.com/z/377524.html

回到顶部