ionic 图片轮播问题_html/css_WEB-ITnose-html教程-PHP中文网

ionic 图片轮播问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:17:36

原创

1246人浏览过

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  });212223 }

登录后复制

注入方式如下：

登录后复制

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