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