有关swiper动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)
以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会遇到很多问题。
以下简单说说最近遇到的问题:
开发需求是需要通过接口请求来动态的改变swiper数据,在这里偷了一个懒,直接用vue驱动数据的改变,就只写了一个swiper,直接通过数据改变驱动swiper里数据的切换。
最开始是模拟的数据,这样开始使用起来是没有问题的,但是在使用真实数据后就有一大波问题出现,开始以后是同步异步的问题,所以将swiper的初始化放在了请求数据成功后,但还是没有解决问题。
出现的问题:
1、swiper不能自动切换(设置了autoplay)。
2、数据不匹配(需要加载的数据以改变,但是swiper里面的数据出现错误)。
3、数据匹配过后,永远切换不到第一条数据。
4、根本不能切换,手动拉也拉不动。
总之遇到了很多从来没有遇到的问题!!!问题所在就是没有真正的了解swiper提供的方法,最后根据自己需求,静下心来去看了swiper官网的方法使用,问题解决的差不多了。
HTML代码
JS
真正的核心部分在
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动态改变滑动内容
假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1 body下面添加如下代码 <div class="swiper-container temp"> <d ...
- DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行
.net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下: 代码如下,有注解,相信大家都看得明白: ...
- Ext.grid.Panel 数据动态改变后刷新grid
gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列
jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...
- 齐博x1动态改变标签调用不同频道的数据
标签默认需要设置标签参数 type 指定调用哪个频道的数据,比如下面的代码,需要默认指定商城的数据, {qb:tag name="qun_pcshow_shop001" type= ...
- 关于swiper动态更改,无法更新的悖论
关于swiper动态更改,无法更新的悖论 以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求 ...
- jqGrid使用setColProp方法动态改变列属性
在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...
- android 动态改变listview的内容
本文模拟:点击一个按钮,为已有的listview添加一行数据 <?xml version="1.0" encoding="utf-8"?> < ...
- [osg]osg绘制动态改变顶点的几何体
最简单的顶点数据更新方法是预先获取setVertexArray()所用的数组数据,并对其进行更新.但是对于开启显示列表支持的几何体(这是默认的情况)来说,有一个问题需要特别需要引起注意,即显示列表中的 ...
随机推荐
- 阿里巴巴AI Lab成立两年,都做了些什么?
https://mp.weixin.qq.com/s/trkCGvpW6aCgnFwLxrGmvQ 撰稿 & 整理|Debra 编辑|Debra 导读:在 2018 云栖人工智能峰会上,阿里巴 ...
- 谷歌AI涉足艺术、太空、外科手术,再强调AI七原则
谷歌AI涉足艺术.太空.外科手术,再强调AI七原则 https://mp.weixin.qq.com/s/MJG_SvKCEBKRvL3IWpL0bA 9月18日上午,Google在上海的2018世界 ...
- Android为TV端助力 ViewTreeObserver(转载)
Android ViewTreeObserver简介 一.结构 public final class ViewTreeObserver extends Object java.lang.Objec ...
- 坚定关于考研或者工作的决定:work
转眼之间,我已经夸过了大二结束的节点,已经是一个准大三了: 在这个岔路口,首要的选择就是考研和工作的选择:我也有过犹豫要不要考研,最终还是放弃了考研的想法,从考研的利弊两个方面来谈: 首 ...
- js 学习之路7:switch/case语句的使用
语法格式: switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代 ...
- LeetCode算法题-Two Sum IV - Input is a BST(Java实现)
这是悦乐书的第280次更新,第296篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第148题(顺位题号是653).给定二进制搜索树和目标数,如果BST中存在两个元素,使得 ...
- SpringBoot+mybatis使用@Transactional无效
项目中新增过程中如果出现异常需要回滚, 在service实现方法中使用@Transactional注解失效 解决: 1, 在controller中使用try{}catch捕捉异常 2, 在servic ...
- ZooKeeper的安装与部署
本文讲述如何安装和部署ZooKeeper. 一.系统要求 ZooKeeper可以运行在多种系统平台上面,表1展示了zk支持的系统平台,以及在该平台上是否支持开发环境或者生产环境. 表1:ZooKeep ...
- iis .apk .ipa下载设置
.apk .ipa无法下载 解决步骤:1).打开IIS服务管理器,找到服务器,右键-属性,打开IIS服务属性:2.单击MIME类型下的“MIME类型”按钮,打开MIME类型设置窗口:3).单击“新建” ...
- 使用Mycat构建MySQL读写分离、主从复制、主从高可用
数据库读写分离对于大型系统或者访问量很高的互联网应用来说,是必不可少的一个重要功能. 从数据库的角度来说,对于大多数应用来说,从集中到分布,最基本的一个需求不是数据存储的瓶颈,而是在于计算的瓶颈,即S ...