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)通过在后台与服务器进 ...
随机推荐
- 运维笔记--Ubuntu离线安装jdk1.8(JDK8)Java环境
Ubuntu离线环境安装jdk1.8 系统版本:Ubuntu16.04 其他Ubuntu版本安装类似 Jdk版本:8 1. 下载相应离线软件包 Jdk oracle官方下载地址:https://www ...
- vue-cli webpack打包开启Gzip 报错—— Cannot find module 'compression-webpack-plugin
异常描述: 复用以前框架,打包的时候报异常提示: Cannot find module 'compression-webpack-plugin" 然后安装插件: npm install -- ...
- Springboot Mybatis 集成 Redis
版本信息 Sprintboot 采用 2.1.7 RELEASE 版本 Mybatis 采用 2.1.0 Redis 采用 2.1.6.RELEASE Redis 的使用 添加 Redis 依赖 &l ...
- (原创)C++ 同步队列
(原创)C++ 同步队列 同步队列作为一个线程安全的数据共享区,经常用于线程之间数据读取,比如半同步半异步线程池的同步队列. 其实做起来比较简单,要用到list.锁和条件变量,条件变量的作用是在队列满 ...
- IDEA中提示配置jdk1.8
问题描述:运行Java Web项目时,IDEA中提示:Warning:java: 源值1.5已过时, 将在未来所有发行版中删除 解决方法:1. 打开[File]—[Project Structure] ...
- ubuntu修改apache端口号
第一步 sudo vi /etc/apache2/ports.conf 修改监听端口以及主机端口为8080 NameVirtualHost *:8080 Listen 8080 第二步 sudo vi ...
- npm package
lodash JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能 用npm-run自动化任务 Express 4.x API 中文手册 Handlebars.js 模板引擎 使用n ...
- mysql数据库每天备份
以备份mysql下的test数据库为例,备份到/home/data 使用mysqldunp命令 dump.sh mysqldump -h127. -uadmin -P3306 -ppassword t ...
- python-mysql事务
MySQL 事务 MySQL 事务主要用于处理操作量大,复杂度高的数据.简单的理解就是:完成一件事情的多个mysql语句的集合就是一个事务了,可能有人会想,我的mysql本来就是一句一句语句执行的啊, ...
- XGBoost 原理及应用
xgboost原理及应用--转 1.背景 关于xgboost的原理网络上的资源很少,大多数还停留在应用层面,本文通过学习陈天奇博士的PPT地址和xgboost导读和实战 地址,希望对xgboost ...