ionic 圖片輪播問題，ionic圖片輪播

ionic 圖片輪播問題，ionic圖片輪播

1、使用ion-slide可以實現圖片輪播，但是如果在html中僅僅增加ion-slide是遠遠不夠的，會出現兩個問題：

(註：使用的是angularjs。首先需要在,js檔案中注入：$ionicSlideBoxDelegate)

一、有時候會出現圖片無法載入出來。解決辦法是：

在相應的controller檔案增加 $ionicSlideBoxDelegate.update(); 

二、輪播至最後一個不輪播的問題，解決的辦法是：

在相應的controller檔案增加 $ionicSlideBoxDelegate.loop(true);

代碼如下：

 1 function getMessageInface() { 2              vm.condition = { //入參 3                  "sysid": 1000, 4                  "token": "sfiodfndsig" 5              }; 6              Service.post('advertisement', 'findEffectiveDataInfo', vm.condition).then(function(data) { 7  8                  console.log(data) 9                  vm.ADlists = data;10                  angular.forEach(vm.ADlists, function(index) {11                      // statements12                      // console.log("迴圈增加imgurl");13                      if (index.pic.indexOf("http") < 0) {14                          index.pic = vm.imgUrl + index.pic;15                          // console.log(index.pic)16                      }17                  });18                  $ionicSlideBoxDelegate.loop(true); //解決輪播至最後一個不輪播的問題19                  $ionicSlideBoxDelegate.update(); //解決圖片載入不出來的問題20              });21 22 23          }

注入方式如下：

(function() {
angular.module('app').controller('goodsListCtrl', goodsListCtrl);
goodsListCtrl.$inject = ['$scope', '$state', 'Service', '$stateParams', '$localStorage', '$ionicSlideBoxDelegate', '$ionicPopup'];

function goodsListCtrl($scope, $state, Service, $stateParams, $localStorage, $ionicSlideBoxDelegate, $ionicPopup) {
var vm = this;

……

……

}

})();

 

 三、使用$ionicSlideBoxDelegate.loop(true)會出現一個至今也沒有想明白的問題：載入兩張圖片時會顯示四張，也就是說會重複兩張，其他的情況均是正常的。所以我最後的解決辦法只能是根據官方文檔實現手動輪播了……