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(); 重新开始自动切换;
swiper-动态更改数据后轮播点击或拖动失效的更多相关文章
- 关于swiper动态更改,无法更新的悖论
关于swiper动态更改,无法更新的悖论 以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求 ...
- 有关swiper动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)
以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会 ...
- android ArrayAdapter 如何动态更改数据
在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示,使用adpater与listview捆绑后,有时希望在程序使用过程中能动态的更改l ...
- Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据
原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...
- swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...
- TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...
- TabTopAutoTextSizeLayout【自定义文字字号区域(动态选项卡数据且可滑动)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...
- 爬虫---selenium动态网页数据抓取
动态网页数据抓取 什么是AJAX: AJAX(Asynchronouse JavaScript And XML)异步JavaScript和XML.过在后台与服务器进行少量数据交换,Ajax 可以使网页 ...
- selenium抓取动态网页数据
1.selenium抓取动态网页数据基础介绍 1.1 什么是AJAX AJAX(Asynchronouse JavaScript And XML:异步JavaScript和XML)通过在后台与服务器进 ...
随机推荐
- mysql实现row_number()和row_number() over(partition by)
row_number() ) r, test_table t 解释:给test_table里的数据设置行号, rn是行号 row_number() over(partition by) ,@rank: ...
- 【C++】C++中的容器解析
目录结构: contents structure [-] 顺序容器 顺序容器的种类 顺序容器的操作 容器操作可能使迭代器失效 Vector容器的增长机制 容器适配器 关联容器 关联容器的分类 关联容器 ...
- C++ 已知两个时间(年月日)求日期差
转载:https://blog.csdn.net/flyyufenfei/article/details/79796035 #include<iostream> #include < ...
- linux系统错误码大全
#define EPERM 1 /* Operation not permitted */ #define ENOENT 2 /* No such file or directory */ #defi ...
- [转]跨域问题(CORS / Access-Control-Allow-Origin)
原文链接:https://blog.csdn.net/xcbeyond/article/details/84453832 1.前言 最近在项目中,调用Eureka REST接口时,出现了CORS跨越问 ...
- jquery ajax Uncaught TypeError :Illegal invocation 报错
使用jquery ajax异步提交的时候报Uncaught TypeError :Illegal invocation错误,报错如图: 基本上,导致这个错误的原因一般有以下两点: 1.请求类型有误,如 ...
- 容器docker快速入门
一.概述 什么是docker docker是一个应用容器引擎,通俗的讲,docker和我们的vm虚拟机有很多相似的地方,当然也有很多不同的地方 Docker理念是将应用及依赖包打包到一个可移植的容器中 ...
- (原)关于OpenGL中的几个坐标系统的理解
在我们使用opengl做图像处理的过程中,其中必不可少的基本都会用到顶点着色器和片元着色器. 完整的渲染管线图: 那么在这两个着色器程序中,我们需要绘制我们的图像的时候,他们的坐标和位置对应关系是如何 ...
- Hadoop学习笔记——HDFS
1.查看hdfs文件的block信息 不正常的文件 hdfs fsck /logs/xxx/xxxx.gz.gz -files -blocks -locations Connecting to nam ...
- CPU时序信号和分频