最近在写移动端的项目,页面有用的是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滑动失效问题的更多相关文章

  1. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  2. ionic UI Component Slides使用:手动滑动后自动滑动失效解决

    在使用ionic的UI组件Slides时,发现手动滑动后,自动滑动失效 然后历经一点点的艰辛查找后找到方法,如下: 页面代码使用 <ion-slides pager loop="tru ...

  3. scrollView + tableview 上下滑动失效

    scrollView + tableview 上下滑动失效 控制器添加的  要加到子控制器,不然被销毁了 [self addChildViewController:chatVC];

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

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

  5. swiper 解决动态加载数据滑动失效的问题

    两种解决方法 第一种解决办法: success:function(result){ var resultdata =eval("("+result+")"); ...

  6. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

  7. Swiper滑动Html5手机浏览器自适应

    手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度. window.onload=function(){ var swiper = d ...

  8. Swiper 滑动

    1.http://www.swiper.com.cn/download/  下载Swiper.JS  Swiper.CSS 2.引入项目,添加html <div class="cont ...

  9. swiper 滑动插件,小屏单个显示滑动,大屏全部显示

    var currSwiperIndex=0; function widthHandle(){ var level = widthLevel(); if(level==1){ //单个显示,滑动 if( ...

随机推荐

  1. NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)

    先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...

  2. 如何运行使用gradle打包的项目

    目标:https://github.com/davenkin/springmvc4-helloworld 使用SpringMVC编写的一个HelloWorld程序. 初学Gradle只能一步步摸索前进 ...

  3. qt QSplitter分割窗口

    #include <QApplication> #include <QFont> #include <QTextEdit> #include <QSplitt ...

  4. VC实现快递查询

    #include <iostream> #include <string> #include <cstdlib> #include <afxinet.h> ...

  5. 配置 Docker 加速器

    Linux curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io ...

  6. Go语言实现:【剑指offer】链表中倒数第k个结点

    该题目来源于牛客网<剑指offer>专题. 输入一个链表,输出该链表中倒数第k个结点. Go语言实现: type ListNode struct { Val int Next *ListN ...

  7. Java并发之Exchanger类

    应用场景 如果两个线程在运行过程中需要交换彼此的信息,可以使用Exchanger这个类. Exchanger为线程交换信息提供了非常方便的途径,它可以作为两个线程交换对象的同步点,只有当每个线程都在进 ...

  8. android wifi断开原因分析

    最近在解bug的过程中经常遇到密码正确但处于saved的状态,总结原因有已下几种: 1 在ASSOCIATING阶段由于丢包导致ASSOC REJECT 03-16 09:22:12.440 D/Wi ...

  9. WinRAR目录穿越

    WinRAR目录穿越漏洞浅析及复现(CVE-2018-20250) 文章来源: https://www.t00ls.net/articles-50276.html EXP: https://githu ...

  10. 一条Sql的Spark之旅

    背景 ​ SQL作为一门标准的.通用的.简单的DSL,在大数据分析中有着越来越重要的地位;Spark在批处理引擎领域当前也是处于绝对的地位,而Spark2.0中的SparkSQL也支持ANSI-SQL ...