一、ionic 图片轮播问题
使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题
1、如何解决图片加载不出来的问题

仅仅如此就可以了吗?no!no!no……我们会遇到第二个问题
2、如何解决图片轮播至最后一个不轮播的问题
//手动轮播图片
function slideImage() {
vm.timerSlide1 = $timeout(slideImage, 4000);
if (vm.adListInfo && vm.adListInfo.length > 0) {
vm.slideImageIndex1 = vm.slideImageIndex1 === vm.adListInfo.length - 1 ? 0 : vm.slideImageIndex1 + 1;
vm.slideNumber = $ionicSlideBoxDelegate.$getByHandle("adListInfo").currentIndex();
if (vm.slideNumber + 1 != vm.slideImageIndex1 && vm.slideImageIndex1!=0) {
vm.slideImageIndex1 = vm.slideNumber;//手动滑动后和自动轮播保持一致
$ionicSlideBoxDelegate.$getByHandle("adListInfo").slide(vm.slideImageIndex1); //只有首页的banner轮播
} else {
$ionicSlideBoxDelegate.$getByHandle("adListInfo").slide(vm.slideImageIndex1); //只有首页的banner轮播
} }
}
如果轮播的页面cache!=false:
//轮播控制
function ionicViewEvents() {
$scope.$on('$ionicView.beforeEnter', function(event, data) {
if (vm.adListInfo) {
slideImage();
}
if (vm.goodsListBanner) {
slideGoodsListBanner();
} })
//当DOM元素从页面中被移除时,AngularJS将会在scope中触发$destory事件。这让我们可以有机会来cancel任何潜在的定时器
$scope.$on('$ionicView.beforeLeave', function(event, data) {
clearTimeoutPromise();
});
}
//清空计时器promise
function clearTimeoutPromise() {
$timeout.cancel(vm.timerSlide1);
$timeout.cancel(vm.timerSlide2);
vm.timerSlide2 = undefined;
vm.timerSlide1 = undefined;
}
3、一个页面有多个轮播的地方应该如何解决?
- 给每个轮播的增加名字:
<ion-slide-box delegate-handle="adBanner">
<ion-slide ng-repeat="item in homePage.adListInfo">
<div class="bannerImg1">
<img class="slideImg" ng-src="{{item.coverImage}}" ng-click="homePage.clickADBanner(item)"/>
</div>
</ion-slide>
</ion-slide-box>
- 在controller中对每个轮播的模块进行相应的处理
一、ionic 图片轮播问题的更多相关文章
- ionic 图片轮播问题
1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSl ...
- ionic 图片轮播ion-slide-box问题
1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSl ...
- 基于ionic框架封装一个图片轮播指令的几点
在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...
- H5如何做手机app(移动Web App)?图片轮播?ionic、MUI
移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
随机推荐
- nRF51822EK_PRO
ARMCC5LIB = C:\Keil\ARM\ARMCC\lib dd if=/dev/zero of=tmp.500M bs=500M count=1 Developer Home
- wusir FTP与HTTP文件传输之TCP Packet解析
向服务器传输文件(上传或下载)时,FTP与HTTP是两种最常用的应用层协议,这两个协议都是基于TCP协议之上.如果深入到数据包内(Packet)进行查看时,FTP与HTTP进行文件传输时有什么特征代码 ...
- (转)2017年Linux运维人员必会开源运维工具体系
标签:操作系统 中间件 千里马 Linux 技能 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51ct ...
- 【转载】伪静态SQL注入
伪静态,主要是为了隐藏传递的参数名,伪静态只是一种URL重写的手段,既然能接受参数输入,所以并不能防止注入.目前来看,防止注入的最有效的方法就是使用LINQ.常规的伪静态页面如下:http://www ...
- 事件委托(js实现)
1.事件委托的作用 事件委托的意义:,事件就是onclick,onmouseover,onmouseout等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做, ...
- struts2 基本流程
一.配置过程 1.在web.xml中配置过滤器 <filter> <filter-name>StrutsPrepareAndExecuteFilter</filter-n ...
- 一头扎进Spring之---------Spring七大核心模块
Spring七大核心模块 核心容器(Spring Core) 核心容器提供Spring框架的基本功能.Spring以bean的方式组织和管理Java应用中的各个组件及其关系.Spring使用BeanF ...
- jstack 结果查看
首先可以用jstack -l pid >sample.dump把java进程的运行栈dump出来. 还可以用grep java.lang.Thread.State sample.dump | a ...
- Android Anwendungsprogramm Entwicklung
1.Einführung des Androids 1.1 Grundlage der Anwendung Activity ist eine Spezifische Bespiel von Andr ...
- Kernel的IIC驱动分析
涉及到的文件: drivers/i2c/i2c-core.c drivers/i2c/i2c-dev.c drivers/i2c/busses/i2c-imx.c 等等 在下面分析的代码中,不想关或者 ...