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

最新推荐文章于 2025-06-17 22:41:20 发布

原创最新推荐文章于 2025-06-17 22:41:20 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #vue

前端小技巧同时被 3 个专栏收录

40 篇文章

订阅专栏

40 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Swiper插件实现数据自动向上滚动的轮播图效果，包括异步获取数据并初始化Swiper的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端工作中轮播图是必不可少的，最近一个项目需要在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,
                            })
                    }
                }
            })