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,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
随机推荐
- 网站全局js代码
这几天开始看公司的一套系统,整理的网站全局js代码 /*文件名:base.js功能说明:全站通用的全局变量及公用方法创建日期:2010-09-26*///引入jquery库文件document.wri ...
- hdu4296 贪心
E - 贪心 Crawling in process... Crawling failed Time Limit:2000MS Memory Limit:32768KB 64bit I ...
- hdu 2564 词组缩写
Problem Description 定义:一个词组中每个单词的首字母的大写组合称为该词组的缩写. 比如,C语言里常用的EOF就是end of file的缩写. Input 输入的第一行是一个整数T ...
- JDBC中PreparedStatement和Statement的区别
共同点: PreparedStatement和Statement都是用来执行SQL查询语句的API之一. 不同点: 在PreparedStatement中,当我们经常需要反复执行一条结构相似的sql语 ...
- MAC中通过gem命令安装compass
在MAC中通过gem命令安装compass时会出异常,原因是compass版本更新了,一些运行时所用到的依赖软件的版本没能得到更新,故而出现错误.例如,用以下命令安装compass: $ gem in ...
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- 使用filter统一设置编码
1.写一个类EncodingFilter.java,实现javax.servlet.Filter(文件命名做到见名知意) package com.filter; import java.io.IOEx ...
- unity3D射线检测敌人是否在前方
//发射一条射线,去检测玩家是否在自己面前,用来随后的发射炮弹 bool isForward = false; var TranformShootPoint = ai.WorkingMemory.Ge ...
- CoFun 1616 数字游戏
Description 一个数x可以按以下规则生成数字: 1.将任意两位交换,若交换的数字为a和b,生成的代价为((a and b)+(a xor b))*2 . 例如134可以生成431,因为431 ...
- 能让汇编转到C51的初学者有更清晰的认识的一篇文章
8051 是傳統 CISC 架構微控制器的代表,而 PIC 則是現代 RISC 架構微控制器的佳作. 雖然說 RISC 架構是公認未來微控制器的主流,但是 8051 藉著累積多年的發展環境與資源,特別 ...