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 ...
随机推荐
- Spring读取properties资源文件
我们知道可以通过读取资源文件流后加载到Properties对象,再使用该对象方法来获取资源文件.现在介绍下利用Spring内置对象来读取资源文件. 系统启动时加载资源文件链路:web.xml --&g ...
- java实例三维空间求点之间的距离。。。。
package com.b; public class Ponit { private double x; private double y; private double z; public Pon ...
- 第15届浙江省赛 E LIS
LIS Time Limit: 1 Second Memory Limit: 65536 KB Special Judge DreamGrid is learning the LI ...
- Unity Shader入门教程(三)自制光照模型
光照模型的概念目前还不明晰,因为笔者也是一个初学者,所以请小心对待笔者介绍的内容.笔者认为光照模型是规定光照算法的模型,比如说前面提到的Lambert光照模型,规定了材质表面的光线的表达式为 环境光+ ...
- Oracle里的执行计划
1 执行计划的查看 1 explan plan 2 dbms_xplan包 3 sqlplus中 set autot 4 10046 5 awr报告 6一些现成的脚本 7 10053 常见的就前4种 ...
- web deploy 部署网站
一.服务端配置 1. 确保在服务器端(我目前是win server 2012 R2)安装管理服务 安装后服务器会重启, 2)安装webdeploy http://www.iis.net/downloa ...
- c语言相关知识点解析
程序基本结构 常量变量标识符 数据类型 整型类型 浮点类型(实型) 基本类型转换 字符串 函数类型 枚举类型 enum 数组类型 结构体类型 共用体类型 字符串函数 运算符 流程控制语句 输入输出语句 ...
- Python基础学习七 网络编程
主要应用urllib和requests模块 urllib模块返回类型为bytes,需要数据类型转换:requests就方便很多. 例子1:发送post请求 url = 'http://api.nnzh ...
- VIM基本命令及自用配置
VIM基本命令 光标移动 G 最后一行 nG 移动到第n行 n回车 光标下移n行 gg 第一行 查找和替换 /word n 重复前一个查找操作 N 向上查找 :n1,n2s/word1/word2/g ...
- 斯坦福CS229机器学习课程笔记 part2:分类和逻辑回归 Classificatiion and logistic regression
Logistic Regression 逻辑回归 1.模型 逻辑回归解决的是分类问题,并且是二元分类问题(binary classification),y只有0,1两个取值.对于分类问题使用线性回归不 ...