ionic1中ion-slide-box的坑

近期,在维护老项目时,在做一个轮播图的新功能时,使用on-slide-box时,遇到的坑在此记录一下,谨防其他人也遇到此坑!

问题:

当slider数据列表是动态获取时,如果数据结果只有2条数据时,slider列表会多复制俩个,造成的问题是显示两个,但是其实html渲染了四个slider,并且多复制出来的两个节点,如果添加了点击事件,时会报错的!

通过下面的slideChange方法做个判断可以解决这个bug

  


$scope.slideChanged = function(index) {  
        $scope.slideIndex = index;  
        if ( ($ionicSlideBoxDelegate.count() -1 ) == index ) {  
            $timeout(function(){  
                $ionicSlideBoxDelegate.slide(0);  
            },3000);  
        }  
    };

$ionicSlideBoxDelegate是一个依赖,不要忘了引入!
虽然说这个方法能解决自动轮播造成的问题,但是当手动操作滑动时,如果你打印$scope.slideIndex = index;这个index,其实还是有问题!

另外一个方法说是修改源代码,如下:
从源文件(ionic.bundle.js)里找到以下代码   
提示:在setup()方法里找

if (slides.length < 2) options.continuous = false;

用下面代码替换:

if (slides.length<2) {
    options.initialContinuous=options.continuous;
    options.continuous=false;
} else if(options.initialContinuous) {
    options.continuous=options.initialContinuous;
}

本人试了一下,好像并没有生效! 也有可能确实有效,但我试了确实没有生效,可能是本人自己的问题!

ion-slide-box这个是真的很坑,为了解决此问题,最后还是采用 Swiper, 顺利解决此问题!

网上一搜一堆解决方案,但是基本都是一个答案,实际上手试了才知道,坑有多深!

所以建议,如果不想手写一个,直接用Swiper,省的踩着些个坑,节省点开发时间!
还有一点是,维护老项目,真的很酸爽!

ionic1中ion-slide-box的坑_第1张图片
image.png

卒! 2019年10月23日 09:30:01

你可能感兴趣的:(ionic1中ion-slide-box的坑)