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) ) {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)会出现一个至今也没有想明白的问题:加载两张图片时会显示四张,也就是说会重复两张,其他的情况均是正常的。所以我最后的解决办法只能是根据官方文档实现手动轮播了……