ionic 图片轮播问题_html/css_WEB-ITnose
程序员文章站
2022-05-30 10:01:55
...
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")注入方式如下:
(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)会出现一个至今也没有想明白的问题:加载两张图片时会显示四张,也就是说会重复两张,其他的情况均是正常的。所以我最后的解决办法只能是根据官方文档实现手动轮播了……
推荐阅读
-
css设置背景图片和背景颜色都不显示_html/css_WEB-ITnose
-
html表单验证证件类型和证件号码匹配,并验证问题_html/css_WEB-ITnose
-
DIV+CSS布局问题_html/css_WEB-ITnose
-
问一个很简单的关于html代码的问题.标题要长!!!!!!!!_html/css_WEB-ITnose
-
使用了min-height后出现了问题_html/css_WEB-ITnose
-
div 位置的奇怪问题_html/css_WEB-ITnose
-
JS获取对象的某个CSS属性值的问题_html/css_WEB-ITnose
-
当把宽度设为25%时,其他浏览器正常,IE7图片会掉下来,有没有好的解决方法_html/css_WEB-ITnose
-
网页中多个图标在一张图片上,使用css将各图标显示_html/css_WEB-ITnose
-
nth-of-type在选择class的时候需要注意的一个小问题_html/css_WEB-ITnose