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

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

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

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

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

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

代码如下:

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

注入方式如下:

  1.  

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

  1.  

function goodsListCtrl($scope, $state, Service, $stateParams, $localStorage, $ionicSlideBoxDelegate, $ionicPopup) {
var vm = this;

……

……

}

})();

  1.  

三、使用$ionicSlideBoxDelegate.loop(true)会出现一个至今也没有想明白的问题:加载两张图片时会显示四张,也就是说会重复两张,其他的情况均是正常的。所以我最后的解决办法只能是根据官方文档实现手动轮播了……

  1.  

ionic 图片轮播问题的更多相关文章

  1. 一、ionic 图片轮播问题

    使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题 1.如何解决图片加载不出来的问题 i ...

  2. ionic 图片轮播ion-slide-box问题

    1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSl ...

  3. 基于ionic框架封装一个图片轮播指令的几点

    在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...

  4. H5如何做手机app(移动Web App)?图片轮播?ionic、MUI

    移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...

  5. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  6. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  7. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. 基于面向对象的图片轮播(js原生代码)

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

随机推荐

  1. 英文长单词断行 word-break VS word-wrap

    你真的了解word-wrap和word-break的区别吗? 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:brea ...

  2. 全世界最详细的图形化VMware中linux环境下oracle安装(一)【weber出品必属精品】

    安装流程:前期准备工作--->安装ORACLE软件--->安装升级补丁--->安装odbc创建数据库--->安装监听器--->安装EM <前期准备工作> 安装 ...

  3. IIS报500.0错误

    IIS安全里面配置:Everyone.IUSR.IIS_IUSRS 参考地址:http://blog.chinaunix.net/uid-21375345-id-3213631.html

  4. C# 程序打包

    1:新建安装部署项目打开VS,点击新建项目,选择:其他项目类型->安装与部署->安装项目,然后点击确定.(详细见下图) 此主题相关图片如下: 2:开始打包2.1 确定即可进入项目文件夹:双 ...

  5. 1236 hdu排名

    Problem Description 今天的上机考试虽然有实时的Ranklist,但上面的排名只是根据完成的题数排序,没有考虑 每题的分值,所以并不是最后的排名.给定录取分数线,请你写程序找出最后通 ...

  6. c#按键Up和Down对Textbox的内容加1减1

    private void textBox_proc1value_KeyDown(object sender, KeyEventArgs e) { Keys key = e.KeyCode; if (e ...

  7. libcurl下载文件简易demo

    size_t test_save(void *ptr, size_t size, size_t nmemb, void *stream) { size_t sizes = size * nmemb; ...

  8. seajs模块压缩问题

    在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁 ...

  9. 遍历json的方式

    var obj = eval("(" + data + ")"); for(var key in obj) { alert(obj[key]); }

  10. DOM事件相关内容

    一.事件流 事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,事件最开始由最具体触发事件的元素(文档中嵌套层次最深的那个节点) ...