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 图片轮播问题的更多相关文章

  1. 一、ionic 图片轮播问题

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

  2. ionic 图片轮播ion-slide-box问题

    1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSl ...

  3. 基于ionic框架封装一个图片轮播指令的几点

    在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...

  4. H5如何做手机app(移动Web App)?图片轮播?ionic、MUI

    移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...

  5. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  6. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  7. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. 基于面向对象的图片轮播(js原生代码)

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

随机推荐

  1. js 闭包和回调

    原文:http://www.cnblogs.com/yuyuj/p/4525530.html 之前的工作都是基于老大搭建的框架,仿照他写的例子写的请求,很多东东也都做好了封装,只需要了解下直接调用就好 ...

  2. FineUI模拟树下拉列表

    模拟树的下拉列表 很多时候,我们希望在下拉列表中显示简单树状的层次结构,在菜单设置.机构设置等场景下这个需求尤为突出.也是基于项目需求的考虑,FineUI增加了模拟树的下拉列表的功能,显示效果如下所示 ...

  3. Silverlight 图表下载到Excel文件中

    一.Silverlight xaml.cs文件按钮触发方法 1.//下载图表        private void btnDown_Click(object sender, RoutedEventA ...

  4. 从字节理解Unicode(UTF8/UTF16)

    如果你不知道或者不了解什么是Unicode/UTF8/UTF16,请详细阅读这篇文章(这也是这篇博文的先决条件): 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 但是如果你看完以上文章 ...

  5. js实现楼层效果

    今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html><html lang="en"><head& ...

  6. [QT]QT概述

    QT概述 基于C++的GUI开发框架,跨平台.Qt 是一个用于桌面系统和嵌入式开发的跨平台应用程序框架. QT是挪威TROLLTECH公司开发的跨平台C++工具,在UNIX下非常出名:他的宗旨是“一次 ...

  7. CF 8D Two Friends 【二分+三分】

    三个地点构成一个三角形. 判断一下两个人能否一起到shop然后回家,如果不能: 两个人一定在三角形内部某一点分开,假设沿着直线走,可以将问题简化. 三分从电影院出来时候的角度,在对应的直线上二分出一个 ...

  8. IE CSS Bug 系列

    1.[IE CSS Bug系列]IE6&IE7图片链接无效 <!doctype html> <html> <head> <meta charset=& ...

  9. WordPress nginx环境下开启多站点

    在wp-config.php插入 define('WP_ALLOW_MULTISITE', true); 进入管理页面安装网络,子目录模式按提示再在wp-config.php插入 define('MU ...

  10. php 实时推送代码

    网站质量不错的网站可以在百度站长平台/数据提交/sitemap栏目下看到实时推送的功能, 目前这个工具是邀请开放, 百度的实时推送的api接口可以实时推送我们新发布的文章, 保证百度在第一时间收录. ...