1、ionic 图片轮播问题

使用ion-slide能够实现图片轮播，可是若是在html中仅仅增长ion-slide是远远不够的，会出现两个问题：图片加载不出来和图片轮播至最后一个不轮播的问题

一、如何解决图片加载不出来的问题

ionic有一个很奇怪的现象：在使用本地json来获取图片的时候，图片时能够加载出来的，可是调用接口后图片的加载就有问题，有时候能够加载出来有时候加载不出来。解决这个问题的方法：

在controller中注入：$ionicSlideBoxDelegate，而后在相应的获取banner图片的接口方法处增长：

$ionicSlideBoxDelegate.update(); //解决图片加载不出来的问题

仅仅如此就能够了吗？no！no！no……咱们会遇到第二个问题

  二、如何解决图片轮播至最后一个不轮播的问题

这样会出现一个新的现象：图片轮播至最后一个就不会轮播：网上有一个很不靠谱的解决办法，会出现图片轮播错误单能够重复轮播 ：

$ionicSlideBoxDelegate.loop(true); //解决轮播至最后一个不轮播的问题

这种方式固然不推荐使用，由于本人本身已经深受其害，可是国内不少网站给出的解决方法都是这个，此处作个记录。

正确的方式是手动轮播图片，下面是手动轮播的代码：

           //手动轮播图片
            function slideImage() {
                vm.timerSlide1 = $timeout(slideImage, 4000);
                if (vm.adListInfo && vm.adListInfo.length > 0) {
                    vm.slideImageIndex1 = vm.slideImageIndex1 === vm.adListInfo.length - 1 ? 0 : vm.slideImageIndex1 + 1;
                    vm.slideNumber = $ionicSlideBoxDelegate.$getByHandle("adListInfo").currentIndex();
                    if (vm.slideNumber + 1 != vm.slideImageIndex1 && vm.slideImageIndex1!=0) {
                        vm.slideImageIndex1 = vm.slideNumber;//手动滑动后和自动轮播保持一致
                        $ionicSlideBoxDelegate.$getByHandle("adListInfo").slide(vm.slideImageIndex1); //只有首页的banner轮播
                    } else {
                        $ionicSlideBoxDelegate.$getByHandle("adListInfo").slide(vm.slideImageIndex1); //只有首页的banner轮播
                    }

                }
            }

若是轮播的页面cache!=false:

//轮播控制
        function ionicViewEvents() {
            $scope.$on('$ionicView.beforeEnter', function(event, data) {
                    if (vm.adListInfo) {
                        slideImage();
                    }
                    if (vm.goodsListBanner) {
                        slideGoodsListBanner();
                    }

                })
                //当DOM元素从页面中被移除时，AngularJS将会在scope中触发$destory事件。这让咱们能够有机会来cancel任何潜在的定时器
            $scope.$on('$ionicView.beforeLeave', function(event, data) {
                clearTimeoutPromise();
            });
        }
        //清空计时器promise
        function clearTimeoutPromise() {
            $timeout.cancel(vm.timerSlide1);
            $timeout.cancel(vm.timerSlide2);
            vm.timerSlide2 = undefined;
            vm.timerSlide1 = undefined;
        }

三、一个页面有多个轮播的地方应该如何解决？

•  给每一个轮播的增长名字：

 <ion-slide-box delegate-handle="adBanner">
         <ion-slide ng-repeat="item in homePage.adListInfo">
               <div class="bannerImg1">
                    <img class="slideImg" ng-src="{{item.coverImage}}"  ng-click="homePage.clickADBanner(item)"/>
               </div>
        </ion-slide>
 </ion-slide-box>

• 在controller中对每一个轮播的模块进行相应的处理