swiper滑动失效问题
最近在写移动端的项目,页面有用的是swiper滑动的。
但是会发现在滑动时,不灵活,就是滑动时隐藏的数据会显示,但是不滑动数据又在初始那,隐藏的数据还是看不到。
于是各种排除问题,终于在pc端+移动端完美解决了问题
问题出在初始化的时候放在html文件了,应该放在接口取值后找到swiper-wrapper类后马上初始化!
$.ajax({
type: "get",
url: "",
dataType: "jsonp",
success: function (json) {
console.log(json);
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3.5,
spaceBetween: 0,
freeMode: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true//修改swiper的父元素时,自动初始化swiper
}); // h5拼接字符串
var saleItem=item.data;
console.log(saleItem);
if(saleItem==""||saleItem==null){
$(".series-sale-wrap").empty();
}
var strSaleHtml="";
for(var i in saleItem){
//循环的swiper-items
strSaleHtml+=' <div class="swiper-slide swiper-slide-items">'
strSaleHtml+=' <div class="tb-right-items">'
strSaleHtml+='<div class="th-right-title">'+saleItem[i].name+' </div>'
strSaleHtml+='<div class="sale-data">'
for(var j in saleItem[i].sales_data){
// console.log(saleItem[i].sales_data);
// console.log(saleItem[i].sales_data[j]);
strSaleHtml +='<div class="sale-items">'+saleItem[i].sales_data[j]+'</div>'
$(".sale-data").append(strSaleHtml);
}
strSaleHtml+='</div>';
strSaleHtml+='</div>';
strSaleHtml+='</div>';
}
$(".swiper-wrapper").append(strSaleHtml); },
error: function () {
console.log("请求失败");
} })
这样就解决了呀,转自 https://www.jianshu.com/p/5dfeec32bf9a
在同一个页面中多次使用swiper轮播插件,如何避免冲突
再写页面用到两个swiper插件,点击时间弹框,会把其他的swiper渲染在时间弹框上,这就尴尬了。本来应该只有年月,现在把另一个的数据也渲染上了。
后来发现需要给不同的 给swiper-container 再起个类名,然后操作这个新的类名,这样两个 swiper 不会冲突
实例化时也根据不同的类名来写就好
var swiper = new Swiper('.swiper-container-recommend', {
slidesPerView: 3.5,
spaceBetween: 0,
freeMode: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true//修改swiper的父元素时,自动初始化swiper
});
这样就完美解决
转载 https://blog.csdn.net/cvper/article/details/80725868
swiper滑动失效问题的更多相关文章
- 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??
在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...
- ionic UI Component Slides使用:手动滑动后自动滑动失效解决
在使用ionic的UI组件Slides时,发现手动滑动后,自动滑动失效 然后历经一点点的艰辛查找后找到方法,如下: 页面代码使用 <ion-slides pager loop="tru ...
- scrollView + tableview 上下滑动失效
scrollView + tableview 上下滑动失效 控制器添加的 要加到子控制器,不然被销毁了 [self addChildViewController:chatVC];
- swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...
- swiper 解决动态加载数据滑动失效的问题
两种解决方法 第一种解决办法: success:function(result){ var resultdata =eval("("+result+")"); ...
- 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...
- Swiper滑动Html5手机浏览器自适应
手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度. window.onload=function(){ var swiper = d ...
- Swiper 滑动
1.http://www.swiper.com.cn/download/ 下载Swiper.JS Swiper.CSS 2.引入项目,添加html <div class="cont ...
- swiper 滑动插件,小屏单个显示滑动,大屏全部显示
var currSwiperIndex=0; function widthHandle(){ var level = widthLevel(); if(level==1){ //单个显示,滑动 if( ...
随机推荐
- NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)
先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...
- 如何运行使用gradle打包的项目
目标:https://github.com/davenkin/springmvc4-helloworld 使用SpringMVC编写的一个HelloWorld程序. 初学Gradle只能一步步摸索前进 ...
- qt QSplitter分割窗口
#include <QApplication> #include <QFont> #include <QTextEdit> #include <QSplitt ...
- VC实现快递查询
#include <iostream> #include <string> #include <cstdlib> #include <afxinet.h> ...
- 配置 Docker 加速器
Linux curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io ...
- Go语言实现:【剑指offer】链表中倒数第k个结点
该题目来源于牛客网<剑指offer>专题. 输入一个链表,输出该链表中倒数第k个结点. Go语言实现: type ListNode struct { Val int Next *ListN ...
- Java并发之Exchanger类
应用场景 如果两个线程在运行过程中需要交换彼此的信息,可以使用Exchanger这个类. Exchanger为线程交换信息提供了非常方便的途径,它可以作为两个线程交换对象的同步点,只有当每个线程都在进 ...
- android wifi断开原因分析
最近在解bug的过程中经常遇到密码正确但处于saved的状态,总结原因有已下几种: 1 在ASSOCIATING阶段由于丢包导致ASSOC REJECT 03-16 09:22:12.440 D/Wi ...
- WinRAR目录穿越
WinRAR目录穿越漏洞浅析及复现(CVE-2018-20250) 文章来源: https://www.t00ls.net/articles-50276.html EXP: https://githu ...
- 一条Sql的Spark之旅
背景 SQL作为一门标准的.通用的.简单的DSL,在大数据分析中有着越来越重要的地位;Spark在批处理引擎领域当前也是处于绝对的地位,而Spark2.0中的SparkSQL也支持ANSI-SQL ...