HTML__图片轮播ion-slide-box
先大概描述一下要做的界面:
<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的更多相关文章
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- Unslider Web前端框架之图片轮播
前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...
- jquery 图片轮播demo实现
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...
- 图片轮播(bootstrap)与 圆角搜索框(纯css)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- 使用js制作一般网站首页图片轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- 基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
随机推荐
- bzoj 3779 重组病毒 —— LCT+树状数组(区间修改+区间查询)
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3779 RELEASE操作可以对应LCT的 access,RECENTER则是 makeroo ...
- (转)【Android】获取Mac地址【2】
[Android]获取Mac地址[2] 之前写了[Android]获取Mac地址[1]有些不够详细,现在贴上一些其他代码,仅供参考. (1) 调用android 的API: NetworkInterf ...
- UNION和UNION ALL关键字
UNION和UNION ALL关键字都是将两个结果集合并为一个,但这两者从使用和效率上来说都有所不同. 1.对重复结果的处理:UNION在进行表链接后会筛选掉重复的记录,Union All不会去除重复 ...
- win7 安装过程中遇到的错误解决方法
win7 安装过程中遇到的错误解决方法 windows安装无法继续.若要安装windows 请单击 确定 重新启动计算机: 当 出现如上提示的时候,按下shift+f10 会打开命令窗口,进入到C:\ ...
- Zombie进程
fork()的作用就是创建一个该进程下的子进程,在其exit 或 exec之前,和他共享代码,以一个父进程的身份,完成以下工作: 1.分配标识符pid和PCB. 2.让子进程复制父进程的环境. 3.给 ...
- python开发进程:进程开启方式&多进程
一,进程的开启方式 利用模块开启进程 from multiprocessing import Process import time,random import os def piao(name): ...
- 红黑树(Red-Black Tree)
概念解析: 红黑树是一种自平衡二叉查找树(self-balancing binary search tree).因此,红黑树本身就是二叉树的一个变种.典型的用途是实现关联数组(Associative ...
- MFC调试的几个技巧
TCHAR pStr[] = _T("this is a test!"); void* p = (void*)pStr; TRACE(_T("pStr is %s\n&q ...
- MAC 10.6 64wei
苹果电脑 Mac OS X 10.6 雪豹系统同时支持 32 位和 64 位模式,关于开启 64 位的好处,字太多,本文后半段介绍.下面先说查看你的苹果电脑是否开启了 64 位以及设置苹果电脑 Mac ...
- Python字符串笔录
python字符串操作实方法,包括了几乎所有常用的python字符串操作,如字符串的替换.删除.截取.复制.连接.比较.查找.分割等 1.去空格及特殊符号 >>> s = '123 ...