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. SWE_Browser编译

    QRD从android4.4开始使用SWE_Browser,android原始代码中不再提供Browser.最近在做一个QRD8916_113517 CMCC入库版本,需要使用SWE_Browser. ...

  2. KiB和KB的区别

    原文链接:http://blog.csdn.net/starshine/article/details/8226320 原来没太注意MB与MiB的区别,甚至没太关注还有MiB这等单位,今天认真了一下, ...

  3. zend studio导入外部项目乱码怎么解决

    在zendstudio ide中,导入一个工程后,发现工程里面很多的文件都打上了红色的叉叉,打开这些文件一看,发现只要是有汉字存在的文件,都出现了乱码.按住alt+enter发现,该文件的编码默认为g ...

  4. 2018.06.27"Shortest" pair of paths(费用流)

    "Shortest" pair of paths Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1589 A ...

  5. Codeforces 1060E(思维+贡献法)

    https://codeforces.com/contest/1060/problem/E 题意 给一颗树,在原始的图中假如两个点连向同一个点,这两个点之间就可以连一条边,定义两点之间的长度为两点之间 ...

  6. boost--asio

    1.asio综述 asio的核心类是io_service,它相当于前摄器模式的Proactor角色,在异步模式下发起的I/O操作,需要定义一个用于回调的完成处理函数,当I/O完成时io_service ...

  7. 使用spring boot +WebSocket实现(后台主动)消息推送

    言:使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!主要是tomcat的兼容与支持. ...

  8. 启动tomcat报错Caused by: java.io.FileNotFoundException: class path resource [io/renren/controller/NodeDataController] cannot be opened because it does not exist

    ?? 清理项目,再重启服务就好了.........

  9. Mybatis-Plus 实战完整学习笔记(六)------select测试一

    查询方法(3.0.3) 1.查询一个员工的数据 @Test public void selectMethod() throws SQLException { // 根据ID获取一个对象的数据 Empl ...

  10. The file left unchanged.

    This files have types: *.___jb_old___ and *.___jb_bak___ The file left unchanged. You can disable &q ...