当前位置: 首页 > news >正文

swiper-动态更改数据后轮播点击或拖动失效

出现的问题:

1、swiper不能自动切换(设置了autoplay)。

2、数据不匹配(需要加载的数据以改变,但是swiper里面的数据出现错误)。

3、数据匹配过后,永远切换不到第一条数据。

4、根本不能切换,手动拉也拉不动。

总之遇到了很多从来没有遇到的问题!!!问题所在就是没有真正的了解swiper提供的方法,最后根据自己需求,静下心来去看了swiper官网的方法使用,问题解决的差不多了。

 

真正的核心部分在

observer:true,//修改swiper自己或子元素时,自动初始化swiper 
observeParents:false,//修改swiper的父元素时,自动初始化swiper 
onSlideChangeEnd: function(swiper){ 
   swiper.update();  
   mySwiper.startAutoplay();
     mySwiper.reLoop();  
}

 

加上这串代码后,使用基本正常

mySwiper.reLoop(); 重新对需要循环的slide个数进行计算,当你改变了slidesPerView参数时需要用到,需要自动轮播的时候必须要加上;

swiper.update();  更新Swiper,这个方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是数据改变是重新初始化一次swiper;

mySwiper.startAutoplay(); 重新开始自动切换;

转载于:https://www.cnblogs.com/guoliping/p/9798775.html

相关文章:

  • 解决oracle报Environment variable ORACLE_UNQNAME not d
  • Notification-状态栏上的通知
  • Linux、Windows如何进行性能监控与调优
  • SpringCloud集成分布式事务LCN (一)
  • 实验报告四 恶意代码技术
  • 转载的项目
  • OpenCASCADE Face Normals
  • PgAUT插件的原理
  • beetl的内置函数 (如strutil 工具类)
  • JDK命令行(jps、jstat、jinfo、jmap、jhat、jstack、jstatd、hprof)与JConsole
  • Aliyun ECS 重置系统
  • Composite组合模式(结构型模式)
  • SQL基础知识
  • 开放源代码库指南
  • WPF换肤之三:WPF中的WndProc
  • 【技术性】Search知识
  • 2017年终总结、随想
  • CSS中外联样式表代表的含义
  • export和import的用法总结
  • Flex布局到底解决了什么问题
  • IDEA 插件开发入门教程
  • Java小白进阶笔记(3)-初级面向对象
  • Spring-boot 启动时碰到的错误
  • vue 配置sass、scss全局变量
  • 那些被忽略的 JavaScript 数组方法细节
  • 如何优雅地使用 Sublime Text
  • 实现菜单下拉伸展折叠效果demo
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • 继 XDL 之后,阿里妈妈开源大规模分布式图表征学习框架 Euler ...
  • 新海诚画集[秒速5センチメートル:樱花抄·春]
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • #android不同版本废弃api,新api。
  • #NOIP 2014# day.2 T2 寻找道路
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (NSDate) 时间 (time )比较
  • (WSI分类)WSI分类文献小综述 2024
  • (翻译)terry crowley: 写给程序员
  • (七)理解angular中的module和injector,即依赖注入
  • (十八)devops持续集成开发——使用docker安装部署jenkins流水线服务
  • (四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (五)大数据实战——使用模板虚拟机实现hadoop集群虚拟机克隆及网络相关配置
  • (新)网络工程师考点串讲与真题详解
  • (一)搭建springboot+vue前后端分离项目--前端vue搭建
  • .Net 代码性能 - (1)
  • .Net 高效开发之不可错过的实用工具
  • .net专家(张羿专栏)
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • .Net组件程序设计之线程、并发管理(一)
  • @Bean有哪些属性
  • [C++]C++基础知识概述
  • [CTO札记]如何测试用户接受度?
  • [EFI]DELL XPS13 9360电脑 Hackintosh 黑苹果efi引导文件
  • [HarmonyOS]第一课:从简单的页面开始
  • [IE编程] WebBrowser控件中设置页面的缩放
  • [IE编程] 多页面基于IE内核浏览器的代码示例