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. SQL0668N 不允许对表"xxx"执行操作,原因码为 "1"

    使用db2 load导入30万条记录到某个表,成功后发现表被锁了,并显示: SQL0668N  不允许对表"xxx"执行操作,原因码为 "1" google了一 ...

  2. 2017/2/16:自己ajax+json习惯性写法 代码拼接的写法 +json用post提交乱码的原因

    1.先导入jquery的包 2.ajax的写法跟注意点 返回一个list的写法 代码拼接写法: html层: 2.script处 4:在你前面传递参数的时候没有遇到乱码问题的情况下,你使用json并且 ...

  3. Android Makefile中是 如何识别 TARGET_PRODUCT 的

    http://blog.csdn.net/stevenliyong/article/details/5285334 今天有时间小看一下Android 的Makefile, 终于稍有明白Android ...

  4. BP神经网络的参数改进参考?

    参考文献:黄巧巧. 基于BP神经网络的手写数字识别系统研究[D].华中师范大学,2009.  47-52 BP神经网络的缺陷:收敛速度慢和局部极小点的问题 使用的改进方案有 1. 学习速率(learn ...

  5. 高性能Java RPC框架Dubbo与zookeeper的使用

    https://blog.csdn.net/qq_38982845/article/details/83795295

  6. java学习3创建学生属性:学号、姓名、电话 完全实现对象集合的增删改查。(控制台来做)

    首先创建一个student类其中包括get,set与构造函数 /** * */package work2; /** * @author Administrator * */public final c ...

  7. HTML5与相关类的扩充

    1.getElementsByclassName()方法 <body> <div class='a1'>klkx1</div> <ul id='ul1'> ...

  8. Ubuntu下配置PHP和CakePHP记录

    目前在完成一个PayPal的支付页面,需要有PHP的开发环境,同时,在开发时使用了CakePHP的框架,于是就有了下面的情景. 操作环境: OS:ubuntu-14.04.2-desktop-amd6 ...

  9. nginx搭建简单的图片服务器

    传统项目一般实现图片上传的话,都会在tomcat下面建立一个图片文件夹,上传成功后,用户可以直接访问, http://ip:port/project/images/xxx.jpg; 这样在用户量少的时 ...

  10. UNIX之父肯和丹尼斯(连载二)

    从那一场“黑客招聘会”说起     2012年7月末在拉斯维加斯召开的全球黑客大会,已经是这系列会议的第二十一次.除了惯常的Bug发表.技术展示之外,最近几年的黑客大会也开始变得越来越像招聘会.IT业 ...