swiper4和swiper3动态更新数据正确用法（vue）

女爷i 2021-11-22 10:26 1440阅读 0赞

初始化，一般写在$nextTick里，可以防止第一张轮播快速闪过

// 初始化轮播图
     setSwiper: function () {
         this.$nextTick(function () {
             this.instantSwiper()
         })
     },

数据更新后：  
swiper3：

this.mySwiper.stopAutoplay();
    this.$nextTick(function(){
        this.mySwiper.update();
        this.mySwiper.reLoop();
        this.mySwiper.startAutoplay();
    })

swiper4：

if (this.swiper) {
        this.swiper.autoplay.stop()
        this.$nextTick(function(){
            this.instantSwiper()
            this.swiper.autoplay.start()
        })
    }

这里写一下swiper4里的swiper初始化方法

instantSwiper: function () {
        this.swiper = new Swiper('.art_swiper', {
            loop:true,
            autoplay: {
                disableOnInteraction: false,//增加此属性即可
            },
            speed: 500,
            // loop:true,
            // autoplay: 3000,
            autoplayDisableOnInteraction: false,
            direction: 'vertical',
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            observeSlideChildren: true,
        });
    },

swiper3和swiper4初始化方法不同，可见这篇文章  
[添加链接描述][Link 1]

[Link 1]: https://blog.csdn.net/zhaohanqq/article/details/88595581

发表评论取消回复

表情：

评论列表（有 0 条评论，1440人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue cli3使用vue-awesome-swiper

> https://www.npmjs.com/package/vue-awesome-swiper 官网区别 vue-cli2 和vue-cli3 在于其中的 c

你的名字/ 2023年03月14日 13:23/ 0 赞/ 168 阅读

相关用vue和swiper实现动态数据的简单轮播

做个轮播碰到了不少坑，记录一下。这里主要是在html的基础上用vue实现轮播功能 CDN 首先在lib文件夹上存放会用到的脚本，并在index文件中导入。由于图片

古城微笑少年丶/ 2023年03月03日 06:22/ 0 赞/ 59 阅读

相关 * swiper in ./node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.js

前言项目安装swiper轮播后，启动报错： -------------------- 错误信息如下： D:\code\zcw-vue-shop\zcw

你的名字/ 2022年12月28日 08:26/ 0 赞/ 324 阅读

相关 vue和swiper冲突问题

Vue引入式开发环境中，使用swiper会出现swiper无法初始化的情况。解决方案：把swiper放到Vue钩子函数里面进行初始化。 updated表示更新DOM完成

ゞ浴缸里的玫瑰/ 2022年12月19日 09:25/ 0 赞/ 203 阅读

相关 vue使用swiper

文章引用[vue使用swiper][vue_swiper] 这次记录主要是记录swiper6的使用，网上多是以前的版本，但是好像vue3可以直接使用swiper6，不需

待我称王封你为后i/ 2022年11月04日 01:36/ 0 赞/ 346 阅读

相关若依引入swiper / VUE引入swiper

现有需求要求实现竖直方向的同时显示3个item的轮播效果，若依VUE（前后端分离）版本使用的是Element UI，框架中的`carousel`组件只能实现简单的轮播效果，并且

妖狐艹你老母/ 2022年10月07日 08:56/ 0 赞/ 471 阅读

相关 vue中 swiper

安装： > npm install vue-awesome-swiper@3 --save-dev main.js > import VueAwesomeSwiper f

水深无声/ 2022年09月09日 09:24/ 0 赞/ 289 阅读

相关 swiper支持动态加载数据

用swiper插件动态加载数据：动态获取完数据之后，在初始化swiper. 1、在<head>标签里面加入swiper的css和js文件 <link re

淡淡的烟草味﹌/ 2022年06月01日 08:21/ 0 赞/ 1048 阅读

相关 Swiper、vue-awesome-swiper中文文档

[中文文档][Link 1] 找了好久才找到，适用于vue-awesome-swiper滑动组件 swiperOption: { heig

悠悠/ 2022年05月14日 02:56/ 0 赞/ 4781 阅读

相关 swiper4和swiper3动态更新数据正确用法（vue）

初始化，一般写在$nextTick里，可以防止第一张轮播快速闪过 // 初始化轮播图 setSwiper: function () { t

女爷i/ 2021年11月22日 10:26/ 0 赞/ 1441 阅读