出现的问题:

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-动态更改数据后轮播点击或拖动失效的更多相关文章

  1. 关于swiper动态更改,无法更新的悖论

    关于swiper动态更改,无法更新的悖论 以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求 ...

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

    以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会 ...

  3. android ArrayAdapter 如何动态更改数据

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示,使用adpater与listview捆绑后,有时希望在程序使用过程中能动态的更改l ...

  4. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  5. swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

    使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...

  6. TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...

  7. TabTopAutoTextSizeLayout【自定义文字字号区域(动态选项卡数据且可滑动)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...

  8. 爬虫---selenium动态网页数据抓取

    动态网页数据抓取 什么是AJAX: AJAX(Asynchronouse JavaScript And XML)异步JavaScript和XML.过在后台与服务器进行少量数据交换,Ajax 可以使网页 ...

  9. selenium抓取动态网页数据

    1.selenium抓取动态网页数据基础介绍 1.1 什么是AJAX AJAX(Asynchronouse JavaScript And XML:异步JavaScript和XML)通过在后台与服务器进 ...

随机推荐

  1. bitcoinjs-lib 哈希交易之多笔交易合并。

    转账的时候需要手动寻找每一笔未花费记录实在太费时. 比特币转账需要提取或合并所有未花费的交易中的比特币,才能实现交易. import * as bitcoin from 'bitcoinjs-lib' ...

  2. mysql 排序长度限制之max_length_for_sort_data以及mysql两种排序算法

    SET max_length_for_sort_data = 1024 SHOW VARIABLES LIKE '%max_length_for_sort_data%'; 查询:SELECT * FR ...

  3. python安装 werkzeug

    1 pip install werkzeug     Werkzeug是一个WSGI工具包,他可以作为一个Web框架的底层库.这里稍微说一下, werkzeug 不是一个web服务器,也不是一个web ...

  4. ImportError: this is MySQLdb version (1, 2, 5, 'final', 1), but _mysql is version (1, 4, 4, 'final', 0)

    (flask-demo) ➜ flask-demo git:(master) ✗ pip install mysqlclient==1.2.5 DEPRECATION: Python 2.7 will ...

  5. spring 支持集中 bean scope?

    Spring bean 支持 5 种 scope: Singleton - 每个 Spring IoC 容器仅有一个单实例. Prototype - 每次请求都会产生一个新的实例. Request - ...

  6. 如何将本地jar包放入本地maven仓库和远程私服仓库

    1.将本地jar包放入本地仓库.只需执行如下命令即可: mvn install:install-file -Dfile=D:/demo/fiber.jar -DgroupId=com.sure -Da ...

  7. 123456123456----updateV#%#6%#%---pinLv###1%%%----com.zzj.CarCleanGame567---前show后广--儿童洗车-222222

    com.zzj.CarCleanGame567---前拼show后广--儿童洗车-

  8. C++内存管理1-64位系统运行32位软件会占用更多的内存吗?

    随着大容量内存成为电脑平台常规化的配置,在配置组装机时很多的用户都会选择8GB甚至是16GB的容量规格内存使用在自己的机器上,如果要将这8GB甚至是16GB的内容在系统使用时能充分利用起来的话,你平台 ...

  9. .Net Oracle TransactionScope的使用

    IIS服务器和Oracle服务器: 1.配置msdtc允许DTC访问及启用事务 2.配置msdtc程序入站出站例外 3.数据库连接字符串不能带enlist=false标识 如下这样带enlist=fa ...

  10. 【翻译】FlinkCEP-Flink的复杂事件处理

    本文翻译自官网:FlinkCEP - Complex event processing for Flink FlinkCEP是在Flink之上实现的复杂事件处理(CEP)库. 它使您可以检测无穷无尽的 ...