ionic 图片轮播ion-slide-box问题
1、使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:
(注:使用的是angularjs。首先需要在,js文件中注入:$ionicSlideBoxDelegate)
一、有时候会出现图片无法加载出来。解决办法是:
在相应的controller文件增加 $ionicSlideBoxDelegate.update();
二、轮播至最后一个不轮播的问题,解决的办法是:
在相应的controller文件增加 $ionicSlideBoxDelegate.loop(true);
<ion-slide-box does-continue="true" show-pager="false">
<ion-slide ng-repeat="item in slideBoxImgs">
<div class="slider-slide-image">
<img src="{{item.path}}"/></div>
</ion-slide>
</ion-slide-box>
controller中注入服务$ionicSlideBoxDelegate
.controller('HotelDetailCtrl', function ($scope,$stateParams,$http,$ionicSlideBoxDelegate)
$ionicSlideBoxDelegate.loop(true); //解决轮播至最后一个不轮播的问题
$ionicSlideBoxDelegate.update(); //解决图片加载不出来的问题
ionic 图片轮播ion-slide-box问题的更多相关文章
- 一、ionic 图片轮播问题
使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题 1.如何解决图片加载不出来的问题 i ...
- ionic 图片轮播问题
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控制过程的图片轮播 运用 ...
- 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 ...
随机推荐
- 【算法】BFS+哈希解决八数码问题
15拼图已经有超过100年; 即使你不叫这个名字知道的话,你已经看到了.它被构造成具有15滑动砖,每一个从1到15上,并且所有包装成4乘4帧与一个瓦块丢失.让我们把丢失的瓷砖“X”; 拼图的目的是安排 ...
- hdu--6178(多校
题意:要在一棵 n 个点的树上放 k 只猴子,然后删掉尽量多的边,使得删边后,每只猴子都至少和另外一只猴子相连,问最后剩下的边数. 思路:其实dfs遍历一次看有多少个点-边-点就好了,比赛的时候就觉得 ...
- css进阶篇
一.css的属性值 1)字体属性 font-size: 5px; /* 字体大小 */ font-size: 20px/50%/larger /* 字体的大小 */ font-family:'Luci ...
- mybatis 使用merge into
前一篇博客,oracle的merge into语法 : oracle merge into语法 mybatis 使用merge into,跟一般的update写法相同: <update id=& ...
- Java设计模式——行为型模式
行为型模式,共11种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模式. 11种模式的关系: 第一类:通过父类与子类的关系 ...
- ACM-ICPC 2018 徐州赛区网络预赛 G Trace(逆向,两颗线段树写法)
https://nanti.jisuanke.com/t/31459 思路 凡是后面的轨迹对前面的轨迹有影响的,可以尝试从后往前扫 区间修改需要push_down,单点更新所以不需要push_up(用 ...
- sprintf()与sscanf()
1.sprintf() sprintf()用于向字符串中写入格式化的数据,eg: int dSrc1 = 1; int dSrc2 = 2; char str[] = "hello" ...
- 移动赋值运算符(c++11)
1.概念 1)移动赋值运算符是一个重载的赋值运算符,参数为自身类的右值引用,返回值自身类的左值引用,由于不抛出任何异常,用noexcept指定(如果定义在类的外面,那么定义也要用noexcept指定) ...
- Zookeeper C++编程实战之配置更新
CZookeeperHelper:https://github.com/eyjian/libmooon/blob/master/include/mooon/net/zookeeper_helper.h ...
- 笔记:IIFE 立即执行的函数表达式 +function ($) { }(window.jQuery);
在Bootstrap源码(具体请看<Bootstrap源码解析1>)和其他jQuery插件经常看到如下的写法: +function ($) { }(window.jQuery); 这种写法 ...