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                      // statements
12                      // 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)會出現一個至今也沒有想明白的問題:加載兩張圖片時會顯示四張,也就是說會重複兩張,其他的情況均是正常的。所以我最後的解決辦法只能是根據官方文檔實現手動輪播了……

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章