イオン画像カルーセル問題_html/css_WEB-ITnose

1. ion-slide を使用して画像カルーセルを実現できますが、html に ion-slide を追加するだけでは不十分です。

(注: Angularjs を使用します。まず、 js ファイルに挿入する必要があります: $ionicSlideBoxDelegate)

1. 画像をロードできない場合があります。解決策は次のとおりです:

対応するコントローラー ファイルに $ionicSlideBoxDelegate.update(); を追加します。

2. 最後のものが回転されるまで回転しない問題は、次のとおりです。

対応するコントローラー ファイルに $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  });212223 }

注入方法は次のとおりです:

(function() {

angular.module('app').controller('goodsListCtrl' , GoodsListCtrl);

goodsListCtrl. $inject = ['$scope', '$state', 'Service', '$stateParams', '$localStorage', '$ionicSlideBoxDelegate', '$ionicPopup'];

うわー
関数GoodsListCtrl($scope, $state , Service, $stateParams, $localStorage, $ionicSlideBoxDelegate, $ionicPopup) {
var vm = this;

…

…

}

})();

3. $ ionicSlideBoxDelegate.loop(true) を使用すると、まだ理解できていない問題が発生します。2 つの画像を読み込むと、4 つの画像が表示されます。これは、2 つの画像が繰り返されることを意味します。他の状況は正常です。したがって、私の最終的な解決策は、公式ドキュメントに従って手動カルーセルを実装することです...