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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
关于JavaScript轮播图的实现
Nov 20 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Angular排序实例详解
2017/06/28 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
python冒泡排序算法的实现代码
2013/11/21 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python开发前景如何
2020/06/11 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
农民入党思想汇报
2014/01/03 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书