ionic1中ion-slide-box的坑

Posted 2021-04-29 前端开发FE

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

问题：

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

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

<ion-slide-box auto-play="true" does-continue="true" slide-interval="3000" on-slide-changed="slideChanged($index)">
　　<ion-slide ng-repeat="pic in pics"><img ng-src="{{pic}}" src="" alt="" width="" height="" /></ion-slide>
</ion-slide-box>

$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，省的踩着些个坑，节省点开发时间！
还有一点是，维护老项目，真的很酸爽！