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比较文档位置
Apr 08 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
jquery遍历json对象集合详解
May 18 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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中返回引用类型的方法
2015/04/03 PHP
PHP时间和日期函数详解
2015/05/08 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
php图片裁剪函数
2018/10/31 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
js字符编码函数区别分析
2008/06/05 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
小学教师个人工作总结2015
2015/04/20 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server