Ionic + Angular.js实现图片轮播的方法示例


Posted in Javascript onMay 21, 2017

本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧。

先来看看实现的效果图:

Ionic + Angular.js实现图片轮播的方法示例

方法示例:

template文件夹新建slider.html

<ion-view view-title="图片轮播">
 <ion-content class="padding" scroll="false">
 <ion-slides class="slider-box" options="options" slider="data.slider">
  <ion-slide-page>
  <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide-page>
  <ion-slide-page>
  <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide-page>
  <ion-slide-page>
  <div class="box pink"><h1>PINK</h1></div>
  </ion-slide-page>
 </ion-slides>
 </ion-content>
</ion-view>

style.css

.slider-box {
 height: 300px;
}
.slider-box .box {
 width: 100%;
 height: 100%;
}
.yellow {
 background: #FFF68F;
}
.blue {
 background: #1E90FF;
}
.pink {
 background: #FF6A6A;
}

app.js:

.state('slider', {
 url: '/slider',
 views: {
 '': {
  templateUrl: 'templates/slider.html',
  controller: 'SliderCtrl'
 }
 }
})

controller.js:

.controller('SliderCtrl', function($scope) {
 $scope.settings = {
 enableFriends: true
 };
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
js几个验证函数代码
Mar 25 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
JavaScript数组 几个常用方法总结
Nov 11 Javascript
详解Angular2中Input和Output用法及示例
May 21 #Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 #Javascript
详解angularjs利用ui-route异步加载组件
May 21 #Javascript
如何在AngularJs中调用第三方插件库
May 21 #Javascript
详解Angular-Cli中引用第三方库
May 21 #Javascript
Angular2安装angular-cli
May 21 #Javascript
Angular2使用Augury来调试Angular2程序
May 21 #Javascript
You might like
php FPDF类库应用实现代码
2009/03/20 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
脚本收藏iframe
2006/07/21 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python多线程同步实例教程
2019/08/11 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
校长就职演讲稿
2014/01/06 职场文书
报关专员求职信范文
2014/02/22 职场文书
学生操行评语大全
2014/04/24 职场文书
公司投资建议书
2014/05/16 职场文书
关于保护环境的标语
2014/06/09 职场文书
环卫工人节活动总结
2014/08/29 职场文书
单位单身证明样本
2014/10/11 职场文书
升职自荐信范文
2015/03/27 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
2016高考冲刺决心书
2015/09/23 职场文书