ionic ion-slide-box 實現

H5 代碼

<ion-slide-box style="height: 100%;" active-slide="vo.slideIndex" on-slide-changed="vc.slideChange($index)" delegate-handle="imgeSlide" auto-play="true" does-continue="true" show-pager="false">

    <ion-slide ng-repeat="imge in vo.imges">

         <img ng-src="{{'data:image/png;base64,'+imge.FileBase64}}" height="90%" style="margin-top:3vw;" />

    </ion-slide>

</ion-slide-box>

 

js代碼

$scope.vc = {

     //圖片滾動

     slideChange: function(index) {

            $scope.vo.slideIndex = index;

            $ionicSlideBoxDelegate.$getByHandle("imgeSlide").slide($scope.vo.slideIndex);

     },

     getDpSgfjBase64: function(orgid, dwjb, fjlxdm, gzhj, scsj, rows) {

           ionicService.showIonicLoading(LOADING);

           pwbService.getDpSgfjBase64(orgid, dwjb, fjlxdm, gzhj, scsj, rows, function(data) {

                 ionicService.hideIonicLoading();

                 if(data.successful) {

                        $scope.$apply(function() {

                              $scope.vo.imges = data.resultValue;

                              //網絡加載需要更新圖片

                              $ionicSlideBoxDelegate.$getByHandle("imgeSlide").update();

                              //循環滾動

                              $ionicSlideBoxDelegate.$getByHandle("imgeSlide").loop(true);

                        });

                  } else {

                        ionicService.toast(TOAST_NETWORK_REQUEST_FAILURE);

                  }

            }, function(msg) {

                  ionicService.hideIonicLoading();

                  ionicService.toast(msg);

            });

      }

 }