ionic 滑动框

ion-slide-box

滑动框是一个包含多页容器的组件，每页滑动或拖动切换：

效果图如下：

用法

<ion-slide-box on-slide-changed="slideHasChanged($index)">

  <ion-slide>

    <div class="box blue"><h1>BLUE</h1></div>

  </ion-slide>

  <ion-slide>

    <div class="box yellow"><h1>YELLOW</h1></div>

  </ion-slide>

  <ion-slide>

    <div class="box pink"><h1>PINK</h1></div>

  </ion-slide>

</ion-slide-box>

API

属性 类型 详情
delegate-handle

(可选)
 字符串

该句柄用$ionicSlideBoxDelegate来标识这个滑动框。
does-continue

(可选)
 布尔值

滑动框是否自动滑动。
slide-interval

(可选)
 数字

等待多少毫秒开始滑动（如果继续则为true）。默认为4000。
show-pager

(可选)
 布尔值

滑动框的页面是否显示。
pager-click

(可选)
 表达式

当点击页面时，触发该表达式（如果shou-pager为true）。传递一个'索引'变量。
on-slide-changed

(可选)
 表达式

当滑动时，触发该表达式。传递一个'索引'变量。
active-slide

(可选)
 表达式

将模型绑定到当前滑动框。

实例

HTML 代码

<ion-slide-box active-slide="myActiveSlide">

	<ion-slide>

	  <div class="box blue"><h1>BLUE</h1></div>

	</ion-slide>

	<ion-slide>

	  <div class="box yellow"><h1>YELLOW</h1></div>

	</ion-slide>

	<ion-slide>

	  <div class="box pink"><h1>PINK</h1></div>

	</ion-slide>

</ion-slide-box>

CSS 代码

.slider {

  height: 100%;

}

.slider-slide {

  padding-top: 80px;

  color: #000;

  background-color: #fff;

  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  font-weight: 300;

}

.blue {

  background-color: blue;

}

.yellow {

  background-color: yellow;

}

.pink {

  background-color: pink;

}

JavaScript 代码

angular.module('ionicApp', ['ionic'])

.controller('SlideController', function($scope) {

  $scope.myActiveSlide = 1;

})

尝试一下 »

完整源码：
  <html>

      <head>

          <meta charset="utf-8">

          <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

          <title></title>

           <link href="http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel="stylesheet">

          <script src="http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min.js"></script>

     <script type="text/javascript">

      angular.module('ionicApp', ['ionic'])





      .controller('SlideController', function($scope) {

        

        $scope.myActiveSlide = 1;

        

      })

      </script>

      <style type="text/css">

      .slider {

        height: 100%;

      }

      .slider-slide {





        padding-top: 80px;

        color: #000;

        background-color: #fff;

        text-align: center;





        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

        font-weight: 300;

      }





      .blue {

        background-color: blue;

        

      }





      .yellow {

        background-color: yellow;

      }





      .pink {

        background-color: pink;

      }

      </style>

    </head>





    <body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController">





    <ion-slide-box active-slide="myActiveSlide">

      <ion-slide>

        <div class="box blue"><h1>BLUE</h1></div>

      </ion-slide>

      <ion-slide>

        <div class="box yellow"><h1>YELLOW</h1></div>

      </ion-slide>

      <ion-slide>

        <div class="box pink"><h1>PINK</h1></div>

      </ion-slide>

    </ion-slide-box>

      

    </body>

  </html>

ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换的更多相关文章

  1. 使用vue.js封装一个包含图片的跑马灯组件

    初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...

  2. Ionic Js十八：滑动框

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

  3. 第二十六节，滑动窗口和 Bounding Box 预测

    上节,我们学习了如何通过卷积网络实现滑动窗口对象检测算法,但效率很低.这节我们讲讲如何在卷积层上应用这个算法. 为了构建滑动窗口的卷积应用,首先要知道如何把神经网络的全连接层转化成卷积层.我们先讲解这 ...

  4. Ionic Js九：列表操作

    列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list ...

  5. js实现可输入的下拉框

    <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...

  6. Ionic Js十一：模态

    ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id=" ...

  7. amazeui学习笔记--js插件（UI增强）--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  8. js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

  9. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

随机推荐

  1. 2019秋Java课程总结&实验总结一

    1.打印输出所有的"水仙花数",所谓"水仙花数"是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个"水仙花数". 实验源码: ...

  2. 设置非阻塞的套接字Socket

    当使用socket()函数和WSASocket()函数创建套接字时,默认都是阻塞的.在创建套接字之后,通过调用ioctlsocket()函数,将该套接字设置为非阻塞模式.函数的第一个参数是套接字,第二 ...

  3. MySQL慢查询日志分割

    mysql> set global slow_query_log=0; Query OK, 0 rows affected (0.00 sec)   mysql> set global s ...

  4. 匈牙利算法实战codevs1022覆盖

    1022 覆盖    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Description 有一个N×M的单位方格中 ...

  5. 前端 JavaScript 基础

    内容目录: 一.JavaScript介绍 二.基础语法   2.1 变量   2.2 数据类型   2.3 流程控制   2.5 函数的全局变量和局部变量   2.6 作用域   2.7 词法分析   ...

  6. centos7 sshd 安全设置

    ssh 的安全机制 1.SSH之所以能够保证安全,原因在于它采用了非对称加密技术(RSA)加密了所有传输的数据.   2.传统的网络服务程序,如FTP等在网络上用明文传送数据.用户帐号和用户口令,很容 ...

  7. python cv2 恢复手机图片

    找到可以恢复的手机图片 矩阵相乘 mat() {} 量化表 8*8 矩阵 与     2 4 2   2    16 16 16后面都是16的8*8矩阵相乘 计算变化的位是否可恢复 单独一张jpg的计 ...

  8. LoadRunner模拟REST接口的json请求

    LoadRunner模拟REST接口的json请求 现在很多手机应用的性能测试,REST接口调用通过json格式,在用loadrunner模拟这些json请求时,需要开发提供 1.供接口地址 2.提交 ...

  9. JUC 一 CountDownLatch（闭锁）

    java.util.concurrent 介绍 CountDownLatch是一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待 CountDownLatch cou ...

  10. SPOJ:[DIVCNT3]Counting Divisors

    题目大意:求1~N的每个数因子数的立方和. 题解:由于N过大,我们不能直接通过线性筛求解.我们可以采用洲阁筛. 洲阁筛的式子可以写成: 对于F(1~√n),可以直接线性筛求解. 对于,我们进行以下DP ...