精华内容
下载资源
问答
  • swiper滑动失效问题

    2020-02-28 16:50:00
    最近在写移动端的项目,页面有用的是swiper滑动的。 但是会发现在滑动时,不灵活,就是滑动时隐藏的数据会显示,但是不滑动数据又在初始那,隐藏的数据还是看不到。 于是各种排除问题,终于在pc端+移动端完美解决了...

    最近在写移动端的项目,页面有用的是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滑动失效的情况解决办法

    千次阅读 2021-01-25 09:42:46
    observer: true, //修改swiper自己或子元素时,自动初始化swiper默认为false observeParents: true //修改swiper的父元素时,自动初始化swiper }); 还有不懂的可以参照Swiper官方文档解析 ...

    只需要在初始化的时候添加两行代码就行。

     var address_side = new Swiper('#address_side', {
    
                observer: true, //修改swiper自己或子元素时,自动初始化swiper默认为false
                observeParents: true //修改swiper的父元素时,自动初始化swiper
    
            });
    

    还有不懂的可以参照Swiper官方文档解析

    展开全文
  • 最近在做项目的时候遇到这样一个问题,就是在vue项目的不同页面使用了swiper插件后,导致其他界面的swiper插件失效,最终摸索了一天终于解决了。 我遇到的情况是这样的,在界面A中,使用这种定义变量式的方式来初始...

    最近在做项目的时候遇到这样一个问题,就是在vue项目的不同页面使用了swiper插件后,导致其他界面的swiper插件失效,最终摸索了一天终于解决了。

    我遇到的情况是这样的,在界面A中,使用这种定义变量式的方式来初始化swiper.

    var mswiper = new Swiper('.swiper-container', {
            effect : 'coverflow',
            slidesPerView: 1.6,
            centeredSlides: true,
            slideShadows:false,
            coverflowEffect: {
              rotate: 0,
              stretch: -40,
              depth: 200,
              modifier: 2,
              slideShadows : true
            }
             });

    而在界面B中,使用的是标签话的方法引用。

    <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid">
            <img :src="item.imgurl" alt="" class="banner_img">
          </swiper-slide>
        </swiper>

    vue界面加载的时候,你会发现这两块内容虽然不属于同一个界面,但是所有的内容都会被顺序解析到同一个界面中,从chrome浏览器的开发者模式可以发现,界面A和界面B最终解析出来的Dom树结构是一样的。

    所以当界面A先解析时,由于通过class=swiper-container会同时识别到A和B两个界面的元素,所以通过第一种定义变量的方式会同时作用于B界面的滑动控件。那么我们肯定不想这两个滑动控件彼此有干扰,怎么解决。

    解决办法很简单,就是在使用变量定义的地方,在swiper-container那个标签上重新添加一个class,通过新添加的class来识别,这样就可以避免最大程度的干扰,两个滑动插件终于都可以正常工作啦。

      <div class="swiper-container" style="margin-top: 50px">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(scene, index) in sceneData">
             ...
            </div>
      </div>

    改为:

     <div class="swiper-container swiper-container_index" style="margin-top: 50px">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(scene, index) in sceneData">
             ...
            </div>
     </div>

    定义的时候,定义语句从

    var mswiper = new Swiper('.swiper-container', {...});

    改为

    var mswiper = new Swiper('.swiper-container_index', {...});

    问题圆满解决。

    展开全文
  • 下面小编就为大家分享一篇swiper 解决动态加载数据滑动失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Permutations IIGiven a collection of numbers that might contain duplicates, return all possible unique permutations ...Webstorm常用的快捷键WS的常用操作: 常用快捷键(Keymap/Eclipse): 复制当前行: Ctrl+...

    Permutations II

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

    Webstorm常用的快捷键

    WS的常用操作: 常用快捷键(Keymap/Eclipse): 复制当前行: Ctrl+Alt+↓ 向上/下移动当前行: Alt+↑/↓ 删除当前行: Ctrl+D 注释/取消当前行: Ctrl+/ ...

    理解Ruby中的作用域

    作用域对于Ruby以及其它编程语言都是一个需要理解的至关重要的基础知识.在我刚开始学习ruby的时候遇到很多诸如变量未定义.变量没有正确赋值之类的问题,归根结底是因为自己对于ruby作用域的了解不够, ...

    POJ 2533 Longest Ordered Subsequence(最长上升子序列(NlogN)

    传送门 Description A numeric sequence of ai is ordered if a1 

    SEH-关于捕获memcpy的异常

    网上有说memcpy是C语言写的,没有异常处理机制. 但是貌似SEH可以处理. SEH("Structured Exception Handling"),即结构化异常处理·是(wi ...

    shopnc导入商品到大商创

    asp&period;net小结

    ASP.net是是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术,主要用于WEB开发,与我们以前接触CS开发相比,虽然相似点不少,但不同点也是有很多的,我来简单的总结一下. 一.控件 A ...

    jquery script

    http://tech.it168.com/a2012/0206/1307/000001307783_all.shtml http://blog.csdn.net/lyatzhongkong/arti ...

    Spring MVC CORS 跨域

    介绍 跨域CORS,全称是"跨域资源共享"(Cross-origin resource sharing) 当页面发出跨域请求时: 简单请求(先简单理解为正常的get/post吧): ...

    展开全文
  • 原因是因为Swiper提前初始化了,然而数据还没有加载完成。解决方法如下: 一、使用Vue提供的$nextTick()方法 二、在Swiper初始化时 转载于:https://www.cnblogs.com/hujieer/p/10309580.html...
  • Swiper滑动监听事件失效问题

    千次阅读 2020-05-25 20:48:32
    因增加了从其它程序直接跳转到这个功能程序,同时直接跳转到第4页,那么向上(或者说往回)滑动slideChangeTransitionEnd得监听事件就失效了。 通过尝试发现可以通过另外一个transitionEnd 事件实现。所以从字面上看...
  • swiper手动滑动失效解决

    千次阅读 2018-12-06 15:13:40
    { swiperParams: { speed: 500, loop: true, autoplay: { disableOnInteraction: false, delay: 2500, }, preventLinksProp...
  • 究其原因,是因为swiper提前初始化了,那时候数据还没有完全出来。这里有两种解决办法1. 使用vue提供的$nextTick()方法当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的...
  • scroll-view滑动失效问题:同理,动态赋予高度值 html <!-- 消息列表 --> <view class="wrap"> <!-- swiper --> <swiper class="swiper-box" :current="swiperCurrent" @change=...
  • 假如有1,2,3屏,从2滑动切换屏幕到3时,删除1,新增4在3后面, 慢点滑动的时候没问题,但是一旦滑动快了,这个滑动事件就失效了,求问大神有什么解决办法没? (function(){ var flog = 0; var mySwiper = new ...
  • var mySwiper = new Swiper('.swiper-... disableOnInteraction: false, //开启这个就可以自动滑动了 delay: 3000, }, effect: 'coverflow', // 如果需要分页器 pagination: { el: '.swiper-pagination', } }
  • swiper的学习(一):解决动态加载数据滑动失效

    万次阅读 热门讨论 2016-12-14 10:28:19
    最近做项目,要求做一个位于顶部可以左右滑动的tab栏,决定用swiper控件实现 具体的swiper使用方法不多说了,官网链接如下: http://www.swiper.com.cn/api/basic/2016/0125/295.html由于容器内部可左右滑动的区域...
  • 1.在Swiper初始化的时候设置两个属性就行,这样在你自己append元素的时候滑动就不会出现问题 var galleryTop = new Swiper('.gallery-top', { observer: true,//修改swiper自己或子元素时,自动初始化swiper ...
  • var mySwiper = new Swiper('.swiper-container',{ autoplay: { disableOnInteraction: false, delay:2000, }, }) </script> 用户操作swiper之后,是否禁止autoplay。默认为true:停止。 ...
  • 在vue中使用swiper正常情况下没有问题,但是当我们请求数据时间比较长,然后请求后在加载swiper就会发现滑动失效,或者需要展示的分页有问题,解决如下 <template> <div class="main bg trafficJam">...
  • 加display:none后swiper轮播滑动失效 1.当一个页面中用到多个swiper插件时,如果swiper名字相同时,轮播滑动会错乱,解决方法:swiper名字不相同即可恢复正常轮播效果 2.当swiper遇上display:none时轮播效果也会...
  • Swiper解决动态加载数据或自定义样式时滑动失效 原因分析: swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数,从而完成初始化,但是由于动态加载是在初始化完成进行的操作,所以无法确定swiper-...
  • swiper 解决动态加载数据滑动失效

    千次阅读 2017-08-30 10:01:45
    1.数据加载后进行swiper初始化 success:function(result){ var resultdata =eval("("+result+")"); if(resultdata.status == 1){ var dataList = resultdata.data; currentPage = ...
  • 解决vue-swiper的banner无法滑动现象

    千次阅读 2019-07-31 21:43:52
    css代码 <... .swiper-container { width: 600px; height: 300px; } </style> html代码 <div id="app"> <input type="text" v-model="num"> <div class="swiper-co...
  • swiper fixed定位滑动失效解决办法

    千次阅读 2017-11-14 13:36:05
    swiper fixed定位
  • swiper手动滑动后自动轮播失效问题

    千次阅读 2019-04-26 13:37:00
    在js部分增加 ...var mySwiperpc2 = new Swiper('#swipercon-pc2', { autoplay: { disableOnInteraction: false,//增加此属性即可 delay: 2500, }, loop : true, navigation: { nextEl: '#swbunext1...
  • swiper手动滑动后自动轮播失效

    千次阅读 2019-08-17 22:45:28
    autoplay中添加这个参数就行disableOnInteraction: false,
  • swiper轮播在fixed的父盒子内失效的解决办法 swiper有这样两个参数:observer和observeParents,前者启动动态检查器,当改变swiper的样式或者修改swiper的子元素时,自动初始化swiper。后者原理和前者一样,只是将...
  • 不过 如果结合swiper后 你会发现 swiper生成后 如果loop模式 那么 你上来想左滑动(也就是向前滑动,行为虽然不符合操作习惯)你会发现 图片的点击事件 是无效的 这是因为 swiper的无限轮播时会自动复制第一个和...
  • 目前只在安卓上出现这个问题,在小程序从后台运行重新切回后,swiper滚动失效并且不断抖动。 解决方法:1.将@change改成@animationfinish 2.加上if (e.target.source == 'autoplay' || e.target.source == 'touch...
  • 楼主的问题不是Swiper插件出现Bug,而是你在createSwiper()函数中,用一个局部变量"var swiper = Swiper()"去创建一个Swiper实例后,再次调用createSwiper()函数时,没有对之前创建的实例进行释放,从而出现问题。...
  • 具体代码实现片段: 下面展示一些 基础用法和动态加载数据实现方式...第三步:初始化swiper // An highlighted block var slide_pic=[ { img:'assets/images/banner1.png', link:'https://www.baidu.co...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 790
精华内容 316
关键字:

swiper滑动失效