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

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

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

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

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

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

    <ion-slide-box does-continue="true" show-pager="false">
<ion-slide ng-repeat="item in slideBoxImgs">
<div class="slider-slide-image">
<img src="{{item.path}}"/></div>
</ion-slide>
</ion-slide-box>
controller中注入服务$ionicSlideBoxDelegate
.controller('HotelDetailCtrl', function ($scope,$stateParams,$http,$ionicSlideBoxDelegate) 
      $ionicSlideBoxDelegate.loop(true); //解决轮播至最后一个不轮播的问题
$ionicSlideBoxDelegate.update(); //解决图片加载不出来的问题

ionic 图片轮播ion-slide-box问题的更多相关文章

  1. 一、ionic 图片轮播问题

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

  2. ionic 图片轮播问题

    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. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  7. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  8. 图片轮播(bootstrap)与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

随机推荐

  1. 【转载】 IP实时传输协议RTP/RTCP详解

    http://www.chinaitlab.com/cisco/RIP/832426.html 1.简介 目前,在IP网络中实现实时语音.视频通信和应用已经成为网络应用的一个主流技术和发展方向,本文详 ...

  2. Python常见错误:IndexError: list index out of range

    用python写脚本查询字典时,在遍历字典时循环到某一项时老是报错   出现这种错误有两种情况: 第1种可能情况 list[index]index超出范围 第2种可能情况 list是空值就会出现 In ...

  3. 【C#】详解C#委托

    目录结构: contents structure [+] 委托语法 泛型委托 委托链 lambda表达式 揭秘委托 类库中的委托 委托和反射 1.委托语法 本文会详细阐述委托的使用,以及实现,想必读者 ...

  4. oracle 监视索引是否使用

    公司的大数据产品已经升级了四个版本了,最新版本的数据计算,大部分从oracle迁移到hadoop中了. 但是也有客户使用旧版的系统,不过,不去管它.只说我管理的. 在我接过这个数据库管理的时候,发现有 ...

  5. java运行报错:nested exception is java.lang.NoSuchFieldError: INSTANCE,但使用@Test测试是好的

    解决方法: 原因是,在tomcat里,同名不同版本的jar包,默认加载版本低的.我项目里有两个httpclient jar包.一个4.2.5  另一个是4.5.所以加载了4.2.5的,而我要用的是4. ...

  6. java 判断对象是否是某个类的类型两种方法

    第一种: instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. 用法: resul ...

  7. GDI基础(1):绘制线条和图形

    1. 绘制一个像素点:SetPixel(). 绘制直线:MoveTo(),LineTo(). 绘制多个首尾相连的线:Polyline(). 绘制矩形:FrameRect(),Rectangle(),F ...

  8. Kotlin入门

    转载自:https://www.cnblogs.com/jaymo/articles/6924144.html 创建类的实例 要创建一个类的实例,我们就像普通函数一样调用构造函数: 1 2 3 val ...

  9. Day1-python基础

    python是一门动态解释性的强类型定义语言 python 3.0  ALL IS UNICODE NOW 认识python,了解python的发展史. 1.变量 变量命名规则:变量名只能是字母.数字 ...

  10. 深入浅出javascript(五)函数

    全局函数 自定义函数 函数对象 函数的属性和方法 一.全局函数 全局函数不同于内置对象的方法(来源于网络),一共有7个,可以直接使用. escape( ).eval( ).isFinite( ).is ...