最近在写移动端的项目,页面有用的是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. solaris系统磁盘镜像

    查看磁盘分区 查看系统的磁盘数据与容量: 用format查看一下磁盘的情况,0号盘是c1t0d0,系统源磁盘,1号盘是c1t1d0,新增加磁盘,作为镜像盘使用. 注意:两块硬盘的容量最好相等,如果镜像 ...

  2. 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载

    微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...

  3. angularJS 传参的四种方法

    AngularJS - Passing data between pages 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Ye Huang链接:https://www.z ...

  4. OOP(面向对象编程)

    原文链接:https://blog.csdn.net/qq_38526635/article/details/81319127OOP编程思想OOP核心思想:封装,继承,多态. 理解: 对象是由数据和容 ...

  5. 都闪开,不用任何游戏引擎,html也能开发格斗游戏

    html格斗游戏,对打游戏 不用引擎,不用画布canvas,不用任何库(包括jquery), 原生div+img组件,开发格斗游戏游戏教程视频已经上传 b站:https://www.bilibili. ...

  6. ASP.NET Core使用环境变量

    前言 通常在应用程序开发到正式上线,在这个过程中我们会分为多个阶段,通常会有 开发.测试.以及正式环境等.每个环境的参数配置我们会使用不同的参数,因此呢,在ASP.NET Core中就提供了相关的环境 ...

  7. [Effective Java 读书笔记] 第7章 方法

    第39条 必要时进行保护性拷贝 对于可变类,如果作为参数传入到自己的类里,并作为自己类的数据使用存储时,需要进行保护性拷贝,比如Date是可变的,如果传入一个Date类,最好做一个保护性拷贝,以免在调 ...

  8. Linux bash管道符“|”使用介绍与例子

    https://blog.csdn.net/wangqianyilynn/article/details/75576815

  9. mysql8.0编译安装

    #下载依赖 yum install -y ncurses ncurses-devel cmake bison bison-devel openssl openssl-libs openssl-deve ...

  10. php 安装扩展插件实例-ftp.so

    工作记录一下   1.首先进入原始php包安装文件(不是安装后的文件,是下载php安装压缩包,解压后的那个文件)安装包里有个扩展文件夹ext,进入 #cd /home/php-5.3.3/ext/#l ...