一、ionic 圖片輪播問題

使用ion-slide可以實現圖片輪播，但是如果在html中僅僅增加ion-slide是遠遠不夠的，會出現兩個問題：圖片加載不出來和圖片輪播至最后一個不輪播的問題

1、如何解決圖片加載不出來的問題

ionic有一個很奇怪的現象：在使用本地json來獲取圖片的時候，圖片時可以加載出來的，但是調用接口后圖片的加載就有問題，有時候可以加載出來有時候加載不出來。解決這個問題的方法：

在controller中注入：$ionicSlideBoxDelegate，然后在相應的獲取banner圖片的接口方法處增加：

$ionicSlideBoxDelegate.update(); //解決圖片加載不出來的問題

僅僅如此就可以了嗎？no！no！no……我們會遇到第二個問題

  2、如何解決圖片輪播至最后一個不輪播的問題

這樣會出現一個新的現象：圖片輪播至最后一個就不會輪播：網上有一個很不靠譜的解決辦法，會出現圖片輪播錯誤單可以重復輪播 ：

$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;
        }

3、一個頁面有多個輪播的地方應該如何解決？

•  給每個輪播的增加名字：

 <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中對每個輪播的模塊進行相應的處理