ion-slide-box
滑动框是一个包含多页容器的组件,每页滑动或拖动切换:
效果图如下:

用法

  1. <ion-slide-box on-slide-changed="slideHasChanged($index)">
  2. <ion-slide>
  3. <div class="box blue"><h1>BLUE</h1></div>
  4. </ion-slide>
  5. <ion-slide>
  6. <div class="box yellow"><h1>YELLOW</h1></div>
  7. </ion-slide>
  8. <ion-slide>
  9. <div class="box pink"><h1>PINK</h1></div>
  10. </ion-slide>
  11. </ion-slide-box>

HTML 代码

  1. <ion-slide-box active-slide="myActiveSlide">
  2. <ion-slide>
  3. <div class="box blue"><h1>BLUE</h1></div>
  4. </ion-slide>
  5. <ion-slide>
  6. <div class="box yellow"><h1>YELLOW</h1></div>
  7. </ion-slide>
  8. <ion-slide>
  9. <div class="box pink"><h1>PINK</h1></div>
  10. </ion-slide>
  11. </ion-slide-box>

CSS 代码

  1. .slider {
  2. height: 100%;
  3. }
  4. .slider-slide {
  5. padding-top: 80px;
  6. color: #000;
  7. background-color: #fff;
  8. text-align: center;
  9.  
  10. font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  11. font-weight:;
  12. }
  13.  
  14. .blue {
  15. background-color: blue;
  16. }
  17.  
  18. .yellow {
  19. background-color: yellow;
  20. }
  21.  
  22. .pink {
  23. background-color: pink;
  24. }

JavaScript 代码

  1. angular.module('ionicApp', ['ionic'])
  2.  
  3. .controller('SlideController', function($scope) {
  4.  
  5. $scope.myActiveSlide = 1;
  6.  
  7. })

Ionic Js十八:滑动框的更多相关文章

  1. Ionic Js十:加载动作

    $ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...

  2. Ionic Js十四:浮动框

    $ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框. 实例 HTML 代码 <p> <button ng-click="open ...

  3. Ionic Js十五:对话框

    $ionicPopup ionic 对话框服务允许程序创建.显示弹出窗口. $ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() . 实例 HTML 代 ...

  4. Ionic Js十九:加载动画

    ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG.  实例 HTML 代码 <ion-c ...

  5. Ionic Js十六:滚动条

    ion-scroll ion-scroll 用于创建一个可滚动的容器. <ion-scroll [delegate-handle=""] [direction="& ...

  6. Ionic Js十二:导航ion-nav-view

     ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史.通过检测浏览历史,实现向左或向右滑动时可以正确转换视图. 采用AngularUI路由器模块等应用程序接口可以分为 ...

  7. Ionic Js五:单选框操作

    实例中,根据选中的不同选项,显示不同的值. HTML 代码 <ion-header-bar class="bar-positive"> <h1 class=&qu ...

  8. ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换

    ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed=&quo ...

  9. Bootstrap入门(二十八)JS插件5:工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

随机推荐

  1. 洛谷 p2530 化工场装箱员(资源型)

    化工场装箱员 https://www.luogu.org/problem/show?pid=2530 118号工厂是世界唯一秘密提炼锎的化工厂,由于提炼锎的难度非常高,技术不是十分完善,所以工厂生产的 ...

  2. 服务器能ping通ip,通不了域名解决方案

    # 将网卡配置文件配置固定ip后,添加DNS解析,然后重启网卡即可: [root@a ~]# tail -2 /etc/sysconfig/network-scripts/ifcfg-ens160 D ...

  3. nodejs学习:net模块

    官方API文档地址:https://nodejs.org/api/net.html 创建一个server.js var net = require('net'); var PORT = 8099; v ...

  4. Dream------scala--开发环境搭建

    scala简介: scala是一门函数式编程和面向对象编程结合的语言 函数式编程非常擅长数值计算而面向对象特别适合于大型工程或项目的组织以及团队的分工合作 我们借助scala可以非常优雅的构造出各种规 ...

  5. 一个diff工具,用于判断两个目录下所有的改动(比较新旧版本文件夹)

    需求: 编写一个diff工具,用于判断两个目录下所有的改动 详细介绍: 有A和B两个目录,目录所在位置及层级均不确定 需要以B为基准找出两个目录中所有有改动的文件(文件或内容增加.修改.删除),将有改 ...

  6. bzoj 4816: 洛谷 P3704: [SDOI2017]数字表格

    洛谷很早以前就写过了,今天交到bzoj发现TLE了. 检查了一下发现自己复杂度是错的. 题目传送门:洛谷P3704. 题意简述: 求 \(\prod_{i=1}^{N}\prod_{j=1}^{M}F ...

  7. Linux内核Ramdisk(initrd)机制【转】

    转自:http://www.cnblogs.com/armlinux/archive/2011/03/30/2396827.html 摘要:对于Linux用户来说,Ramdisk并不陌生,可是为什么需 ...

  8. linux音频alsa-uda134x驱动文档阅读之一转自http://blog.csdn.net/wantianpei/article/details/7817293

    前言 目前,linux系统常用的音频驱动有两种形式:alsa oss alsa:现在是linux下音频驱动的主要形式,与简单的oss兼容.oss:过去的形式而我们板子上的uda1341用的就是alsa ...

  9. 超简单的qps统计方法(推荐)【转】

    统计最近N秒内的QPS值(包括每秒select,insert等值) mysql> select variable_name,sum(per_sec) as qps from (select st ...

  10. MVVM设计模式的事件绑定

    为什么要事件绑定 这个问题其实是很好理解的,因为事件是丰富多样的,单纯的命令绑定远不能覆盖所有的事件.例如Button的命令绑定能够解决Click事件的需求,但Button的MouseEnter.窗体 ...