首頁 > web前端 > html教學 > ionic 图片轮播问题 - 信姿姬

ionic 图片轮播问题 - 信姿姬

WBOY
發布: 2016-05-20 13:46:29
原創
1239 人瀏覽過

1、使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:

(注:使用的是angularjs。首先需要在,js文件中注入:$ionicSlideBoxDelegate)

一、有时候会出现图片无法加载出来。解决办法是:

在相应的controller文件增加 $ionicSlideBoxDelegate.update(); 

二、轮播至最后一个不轮播的问题,解决的办法是:

在相应的controller文件增加 $ionicSlideBoxDelegate.loop(true);

代码如下:

 1 function<span> getMessageInface() {
 2              vm.condition = { //入参
 3                  "sysid": 1000<span>,
 4                  "token": "sfiodfndsig"
 5 <span>             };
 6              Service.post('advertisement', 'findEffectiveDataInfo', vm.condition).then(function<span>(data) {
 7 
 8 <span>                 console.log(data)
 9                  vm.ADlists =<span> data;
10                  angular.forEach(vm.ADlists, function<span>(index) {
11                      // statements
12                      // console.log("循环增加imgurl");
13                      if (index.pic.indexOf("http") ) {
14                          index.pic = vm.imgUrl +<span> index.pic;
15                          // console.log(index.pic)
16 <span>                     }
17 <span>                 });
18                  $ionicSlideBoxDelegate.loop(true); //解决轮播至最后一个不轮播的问题
19                  $ionicSlideBoxDelegate.update(); //解决图片加载不出来的问题
20 <span>             });
21 
22 
23          }</span></span></span></span></span></span></span></span></span></span></span>
登入後複製

注入方式如下:

登入後複製
登入後複製

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

 

<br><br>
登入後複製
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板