先大概描述一下要做的界面:

从网络请求json数据,获取网络图征数据,然后轮播图片。我遇到的问题是:图片不显示,代码如下
<ion-slide-box does-continue="true" show-pager="true" auto-play="true" slide-interval="1000">
<ion-slide ng-repeat="item in homePage" >
<div class="imgLoop">
<img src="{{item.imgUrl}}" class="imgScroll"/>
</div>
</ion-slide>
</ion-slide-box>
解决办法:

<ion-slide-box does-continue="true" show-pager="true" auto-play="true" slide-interval="1000" ng-if="homePage.length>0">
<ion-slide ng-repeat="item in homePage" >
<div class="imgLoop">
<img src="{{item.imgUrl}}" class="imgScroll"/>
</div>
</ion-slide>
</ion-slide-box>

总结:主要就是加了一个判断条件 ng-if="homePage.length>0" ,大概意思就是:当数组homePage有值时,执行下标签里的内容。  如果不加ng-if  那么HTML在加载时,数组还没值 ,
所以图片不会显示。因为网络请求是异步的,当异步请求结束后数组有值了,标签里的内容才会执行。

HTML__图片轮播ion-slide-box的更多相关文章

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

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

  2. Unslider Web前端框架之图片轮播

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

  3. jquery 图片轮播demo实现

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

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

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

  5. 利用bootstrap写图片轮播

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

  6. 使用js制作一般网站首页图片轮播效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  8. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  9. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

随机推荐

  1. git常用命令小结

    1.ssh连接方式 公钥生成ssh-keygen -t rsa -C "764432054@qq.com"在用户家目录下的.ssh目录下生成 id_rsa ,id_rsa.pub ...

  2. 【转】Apache JMeter web性能测试实例

    Apache JMeter是可以对利用HTTP或FTP服务器的应用程序进行测试的工具.它是基于Java的,通过所提供的API它还具有高度可扩展性.典型的JMeter测试包括创建循环和线程组.循环使用预 ...

  3. java中二维数组求最大值代码。。。。。。不懂呀

    总结:二维数组理解不了,,,,求解析... package com.c2; public class Aaa { // 求数组元素中最大的 public static void main(String ...

  4. 事务之三:编程式事务、声明式事务(XML配置事务、注解实现事务)

    Spring2.0框架的事务处理有两大类: JdbcTemplate操作采用的是JDBC默认的AutoCommit模式,也就是说我们还无法保证数据操作的原子性(要么全部生效,要么全部无效),如: Jd ...

  5. Java-API-Package:java.net百科

    ylbtech-Java-API-Package:java.net百科 并非所有系统都支持 IPv6 协议,而当 Java 网络连接堆栈尝试检测它并在可用时透明地使用它时,还可以利用系统属性禁用它.在 ...

  6. (转)编写 DockerFile

    这几天在研究怎样制作docker image. 其中使用dockerfile是一种可记录制作image的过程的并且是容易重复使用的一种方式.在园子里看到了一篇好文,于是分享到这里~~ 原文链接: ht ...

  7. python学习(六) 抽象

    6.1 懒惰即美德 斐波那契数列: >>> fabs = [0, 1]>>> for i in range(8): fabs.append(fabs[-1] + f ...

  8. WEB前端必备掌握知识

    1.跨域: 跨域问题是由于javascript语言安全限制中的同源策略造成的.

  9. Django Rest Framework 3

    目录 一.版本 二.解析器 三.序列化 四.请求数据验证 一.版本 程序也来越大时,可能通过版本不同做不同的处理 没用rest_framework之前,我们可以通过以下这样的方式去获取. 1 clas ...

  10. C#中用SerialPort类中的Write()方法发送十六进制数

    在C#中用SerialPort类中的Write()方法向串口发送十六进制数的方法: MSDN对SerialPort::Write()是这样解释的: 将数据写入串行端口输出缓冲区. 重载列表   名称 ...