有关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(); 重新开始自动切换;

但是还会有一个问题,比如说在初始化页面是,初始化加载一组数据,但是这组数据里面只有一条信息,但是其他组数据里面包含了多条信息,在这种情况下必须要手动切换一次才能触发自动轮播,还没找到解决办法。

以上就是遇到的一些问题,记录一下,以后遇到还可以看看。

时间: 2024-08-05 18:36:03

有关swiper动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)的相关文章

swiper里面的,tab切换,不同的slide高度不一样,外层高度何如随之改变,如果里面的每一屏的高度不一样,那么就会一直以高度最大的一个座位最外层的高度,总成了页面内容少的那一页有很大空白,改如何动态改变外层的高度呢

解决方案:1.autoHeight: true;缺点:有明显的跳动效果2.先给容器设固定高度,每次滑动多少时,改变当前tab页的容器高度,我在实现是遇到一点小问题,代码忘记保存了. 3.滑动切换第二个页面的顶部,需要用scrollTop实现, onSlideChangeStart: function(swiper){ //$( '.swiper-container' ).scrollTop(0);这样是直接到顶部,往往会出现闪屏, $( '.swiper-container' ).animate

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

蓝牙广播数据格式和动态改变

本文由嵌入式企鹅圈原创团队成员黄鑫提供. 广播内容的自定义是蓝牙BLE开发的基本技能,用户最多能够设置31字节.但是用户定义是必须要遵循BLE协议的.另外,ibeacon应用和一些特定的应用要利用广播来传递数据,而且不同时间段的广播内容还会改变,如ibeacon的major/minor和电量显示等待.本文即阐述蓝牙的广播数据格式和动态改变. 参考文档:bluetooth specification version 4.0, p1735-p1738 一.广播数据格式 总共31字节,由一个或者多个广

Android通过String.format格式化(动态改变)字符串资源的显示内容

一.实现效果: 最近在项目中需要做类似于上图显示的效果,里面的数字和称谓是动态获取的,对于这种显示效果,有如下两种解决方案来处理: (1)通过代码动态设置TextView的内容,比如: /** * 显示今日状态 * * */ private void showTodayState( int totalUser, float upRate, String hornor, char level ){ StringBuilder todayStateStr = new StringBuilder( )

NGUI ScrollView动态添加Item(不用GameObject.Find()去查找需要动态改变的游戏对象)

借鉴网上的提示,但具体的网址忘记保存了,因此无法放在这里!如需要注明出处,请联系本人. PS:网上说的不够详细,自己敲了下代码实现并整理了一下. 下面我用UITable组件而不是UIGrid来排序Item 将Item做成预设体,如下图中的3:QuestLog(此GO对应官方的例子中的QuestLog) 在预置体QuestLogPrefab中的GO对象QuestLog上挂脚本,如上图中1:脚本命名为QuestLogPrefab(当然类名也一样),然后在脚本里声明你需要动态改变数据的GO,记得需要p

动态改变cell的高度&amp;beginUpdates和endUpdates-实现UITableView的动画块

1.利用reloadRowsAtIndexPaths:withRowAnimation:来动态改变cell的高度 UITableView的- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation 这一方法会重新加载所指定indexPaths中的UITableViewCell实例,因为重新加载cell所以会请求这个UITableView实例的dat

unity3d关于怎样动态改变物体 shader

material = new Material(Shader.Find("Custom/Alpha")); material.SetFloat("_Shininess", materialAlpha); void OnRenderImage(RenderTexture source, RenderTexture destination){Graphics.Blit(source, destination, material);} unity3d关于怎样动态改变物体

Unity动态改变src的解决方法

在c#程序(winform,wpf)中可以嵌入unity控件,从而实现三维场景.通过设置unity控件的src属性来设置场景,然而src必须是绝对路径,而且只能在设计器进行设置,不能在代码中动态修改,这在需要运行时动态切换场景的时就悲剧了.当然网上有很多关于Unity 如何动态改变src的方法,其方法是正确的,最大的问题莫过于没有说明代码该放在什么地方,干着急. 下面假设unity控件的文件Unity3dControl.cs,那么打开Unity3dControl.designer.cs,找到函数

WPF 中动态改变控件模板

在某些项目中,可能需要动态的改变控件的模板,例如软件中可以选择不同的主题,在不同的主题下软件界面.控件的样式都会有所不同,这时即可通过改变控件模板的方式实现期望的功能. 基本方法是当用户点击切换主题按钮是加载新的资源字典,并使用新加载的资源字典替代当前的资源字典这时要用到ResourceManager. 假设现有两个不同的资源字典文件Dictionary1.xaml和Dictionary2.xaml存在于Themes文件夹内: 在MainPage中使用其中一个资源字典作为默认样式文件: <Win