查看: 2710|回复: 1
打印 上一主题 下一主题

Swiper手机版页面,横竖屏切换的时候出现异常

[复制链接]

该用户从未签到

1

主题

2

帖子

24

积分

新手上路

Rank: 1

积分
24
跳转到指定楼层
楼主
发表于 2016-4-7 17:02:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 aizhenashi 于 2016-4-7 17:16 编辑

如题,异常状况:
      由于有多张图,用SlideTo做了跳转到指定图片,跳转完成后,前后滑动正常。但是当手机切换横竖屏时,已经滑动到其他图片的,会自动跳到slideTo的那张图。

有没有对这个有过了解的大神,给个解决思路。

部分代码如下:
   跳转代码
          var mySwiper = new Swiper('.swiper-container',{
            loop:true
        });
        $("#toThePage").unbind('click').bind('click',function(){
            var pageGo = parseInt($("#pageToGo").val());
            var pageTotal = parseInt($("#totalPages").text());
            if(pageGo > pageTotal){
                //alert("请输入正确的页码!");
                TINY.box.show("请输入正确的页码!",0,0,0,0,2);
                return false;
            }
            if(pageGo < 1){
                //alert("请输入正确的页码!");
                TINY.box.show("请输入正确的页码!",0,0,0,0,2);
                return false;
            }
            if(isNaN(pageGo)){
                TINY.box.show("请输入正确的页码!",0,0,0,0,2);
                return false;
            }
            var pageImg = pageGo-1;
            var readUrl = "<?php echo $book['basePath'].$book['dirName'].'/'.$book['serial'];?>"+"-"+pageImg+".png";
            $("#getPageBg").css('display','none');
            $("#getPage").css('display','none');
            $("#nowPage").text(pageGo);
            $("#pageNow").text(pageGo);
            $("div[data-swiper-slide-index='"+pageImg+"']").find("img").attr("src",readUrl);
            mySwiper.slideTo(pageGo, 300, false);
        });

      滑动代码:
         var swiper = new Swiper('.swiper-container',{
            loop:true,
            onSlideChangeEnd: function(swiper){
                 var index = parseInt($(".swiper-slide-active").attr("data-swiper-slide-index"));

                //alert(index);
                $("#nowPage").html(index+1);
               $("#pageNow").text(index+1);
               var path = "<?php echo $book['basePath'].$book['dirName'].'/'.$book['serial'];?>";
               var child = index+1;  
               $("#pageToGo").val(child);
               var nextChild = index+2;
               if($("div[data-swiper-slide-index='"+index+"']")) $("div[data-swiper-slide-index='"+index+"']").find("img").attr("src",path+'-'+index+'.png');
               if($("div[data-swiper-slide-index='"+child+"']")) $("div[data-swiper-slide-index='"+child+"']").find("img").attr("src",path+'-'+child+'.png');
               if($("div[data-swiper-slide-index='"+nextChild+"']")) $("div[data-swiper-slide-index='"+nextChild+"']").find("img").attr("src",path+'-'+nextChild+'.png');
               //alert(swiper.activeIndex);
           }
        });

测试后发现,不只是SlideTo在横竖屏切换时会出现,普通滑动,横竖屏切换,也会回来起始位置!

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

1

主题

2

帖子

24

积分

新手上路

Rank: 1

积分
24
沙发
 楼主| 发表于 2016-4-7 17:02:29 | 只看该作者
大神快来
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-23 04:05 , Processed in 0.057787 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表