ionic 图片轮播问题
1、使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:
(注:使用的是angularjs。首先需要在,js文件中注入:$ionicSlideBoxDelegate)
一、有时候会出现图片无法加载出来。解决办法是:
在相应的controller文件增加 $ionicSlideBoxDelegate.update();
二、轮播至最后一个不轮播的问题,解决的办法是:
在相应的controller文件增加 $ionicSlideBoxDelegate.loop(true);
代码如下:
1 function getMessageInface() { 2 vm.condition = { //入参 3 "sysid": 1000, 4 "token": "sfiodfndsig" 5 }; 6 Service.post('advertisement', 'findEffectiveDataInfo', vm.condition).then(function(data) { 7 8 console.log(data) 9 vm.ADlists = data; 10 angular.forEach(vm.ADlists, function(index) { 11 // statements 12 // console.log("循环增加imgurl"); 13 if (index.pic.indexOf("http") < 0) { 14 index.pic = vm.imgUrl + index.pic; 15 // console.log(index.pic) 16 } 17 }); 18 $ionicSlideBoxDelegate.loop(true); //解决轮播至最后一个不轮播的问题 19 $ionicSlideBoxDelegate.update(); //解决图片加载不出来的问题 20 }); 21 22 23 }
注入方式如下:
(function() {
angular.module('app').controller('goodsListCtrl', goodsListCtrl);
goodsListCtrl.$inject = ['$scope', '$state', 'Service', '$stateParams', '$localStorage', '$ionicSlideBoxDelegate', '$ionicPopup'];
function goodsListCtrl($scope, $state, Service, $stateParams, $localStorage, $ionicSlideBoxDelegate, $ionicPopup) {
var vm = this;
……
……
}
})();
三、使用$ionicSlideBoxDelegate.loop(true)会出现一个至今也没有想明白的问题:加载两张图片时会显示四张,也就是说会重复两张,其他的情况均是正常的。所以我最后的解决办法只能是根据官方文档实现手动轮播了……
ionic 图片轮播问题的更多相关文章
- 一、ionic 图片轮播问题
使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题 1.如何解决图片加载不出来的问题 i ...
- 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,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
随机推荐
- (转) [老老实实学WCF] 第三篇 在IIS中寄存服务
第三篇 在IIS中寄宿服务 通过前两篇的学习,我们了解了如何搭建一个最简单的WCF通信模型,包括定义和实现服务协定.配置服务.寄宿服务.通过添加服务引用的方式配置客户端并访问服务.我们对WCF的编程生 ...
- 表格table常见的边框设置和初步的立体效果
做网页时经常会遇到表格,常见的表格如下: <style type="text/css"> .tbtest0 { width:500px; height:200px; b ...
- Java数据库缓存思路
为什么要用缓存?如果问这个问题说明你还是新手,数据库吞吐量毕竟有限,每秒读写5000次了不起了,如果不用缓存,假设一个页面有100个数据库操作,50个用户并发数据库就歇菜,这样最多能支撑的pv也就50 ...
- WordPress页面函数功能代码调用大全
WordPress模板基本文件 style.css 样式表文件index.php 主页文件single.php 日志单页文件page.php 页面文件archvie.php 分类和日期存档页文件sea ...
- git:hook declined FATAL: W refs/heads DENIED by fallthru error
hook declined FATAL: W refs/heads DENIED by fallthru error git提交代码时报错,网上查了,最终结果竟然是测试人员没有给我配置写的权限,配置了 ...
- 【笔记】Linux 和 Unix 作业控制
Linux 和 Unix 属于多任务的操作系统,也就是说一个系统在同一时间段内能运行多重任务(进程). 作业控制不只是能够停止/挂起(stop/suspend)正在执行的进程(命令),也可以继续/唤醒 ...
- cubieboardtruck安装
1.命令关闭所有led灯 ls /sys/class/leds/*/brightness | xargs -i -n1 echo "echo 0 > {}" | sh 如果需 ...
- Virtual Box 工具栏(菜单栏)消失的解决方法
异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 现在Virtual Box非常牛逼(不排除Oracle又准备像Java SE那样 ...
- U盘启动时无USB-HDD选项的解决方案
今天在使用一块老板子的时候 发现没有USB-HDD启动项 在启动顺序中只有 USB-ZIP(ZIP) -FDD(软盘) -CDROM(光驱) 1.插入U盘 2.开机 3.在BIOS中找到Hard D ...
- OC和C语言的混编注意点和好处
苹果的Objective-C编译器批准用户在统一个源文件里自由地混杂利用C++和Objective-C,混编后的语言叫Objective-C++.有了它,你就能够在Objective-C利用过程中利用 ...