ionic ion-slide-box網絡加載圖檔，及時更新，無限循環

**1、ionic ion-slide-box實作有關的循環播放圖檔**

**2、顯示頁面中填寫有關控件**

<ion-content scroll="true" padding="true">
      <div  class="home-slide">
          <ion-slide-box does-continue="true" auto-play="true" slide-interval="3000"  
               delegate-handle="slideboximgs">
              <ion-slide ng-repeat="infoTop in mainTopInfoPlayer">
                  <img ng-src="{{infoTop.photo.url}}">
              </ion-slide>
          </ion-slide-box>
      </div>
           

注解：

1、ion-slide：中的資料不再闡述;這裡會出現加載圖檔不出來的情況，需要代理在controller重繪界面；

2、does-continue：是否循環切換,開頭的幻燈頁隻能向左滑動，最後的幻燈頁隻能向右滑動。 将does-continue屬性值設為true，就可以讓幻燈頁組首尾連接配接起來，循環切換。 但是加載網絡圖檔時候有bug,加載本地圖檔沒有問題；

3、auto-play：是否自動播放，通過将auto-play屬性設定為true，可以讓幻燈頁自動切換。切換的間隔通過屬性slide-interval進行調整，這裡是3000ms。

4、delegate-handle：controller中的代理，用這個參數識别對話框

**3、controller裡面的配置**

$scope.$on('home.maintopfinish', function() {
          HomeFactory.getMainPage();
         var mainInfoTopList= HomeFactory.getMainPageTopInfo();
          $scope.mainTopInfoPlayer=mainInfoTopList.player;
          $log.info("mainInfoTopList",$scope.mainTopInfoPlayer);
          $ionicSlideBoxDelegate.update();
          $ionicSlideBoxDelegate.$getByHandle("slideboximgs").loop(true);
          //上面這句就是實作無限循環的關鍵，綁定了滑動框，
      });
           

注解：

1、$ionicSlideBoxDelegate.update(); 就是當容器尺寸發生變化時，需要調用update()方法重繪幻燈片，更新滑動框（例如，用帶有ng-repeat的Angular，調整它裡面的元素）。

**4、有關 ion-slide中圖檔和slider-pager的配置**

style.css中配置，效果自行修改看效果，不再詳細說明

.home-slide  ion-slide img{
    height: px;
    width: %;
}
.slider-pager {
    position: absolute;
    bottom: px;
    width: %;
    height: px;
    text-align: right;
}

.slider-pager .slider-pager-page {
    display: inline-block;
    margin: px px;
    width: px;
    color: #29C1E5;
    text-decoration: none;
    opacity: ;
    font-size: px;
}