手册

目录

ionic 教程

ionic 教程 ionic 安装 ionic 创建 APP

ionic CSS

ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic Toggle ionic checkbox ionic 单选框 ionic Range ionic select ionic tab(选项卡) ionic 网格(Grid) ionic 颜色 ionic icon(图标)

ionic JavaScript

ionic 上拉菜单 ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作 ionic 切换开关操作 ionic 手势事件 ionic 头部和底部 ionic 列表操作 ionic 加载动作 ionic 模型 ionic 导航 ionic 平台 ionic 浮动框 ionic 对话框 ionic 滚动条 ionic 侧栏菜单 ionic 滑动框 ionic 加载动画 ionic 选项卡栏操作

首页 移动端 其它 ionic中文教程

ionic 滑动框

收藏363

分享

阅读27907

更新时间2022-04-11

ionic 侧栏菜单

ionic 加载动画

---

ion-slide-box

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

效果图如下：

用法

  
    
BLUE

          

YELLOW

          

PINK

  

API

属性	类型	详情
delegate-handle (可选)	字符串	该句柄用$ionicSlideBoxDelegate来标识这个滑动框。
does-continue (可选)	布尔值	滑动框是否自动滑动。
slide-interval (可选)	数字	等待多少毫秒开始滑动（如果继续则为true）。默认为4000。
show-pager (可选)	布尔值	滑动框的页面是否显示。
pager-click (可选)	表达式	当点击页面时，触发该表达式（如果shou-pager为true）。传递一个'索引'变量。
on-slide-changed (可选)	表达式	当滑动时，触发该表达式。传递一个'索引'变量。
active-slide (可选)	表达式	将模型绑定到当前滑动框。

---

实例

HTML 代码

	
	  
BLUE

  

YELLOW

  

PINK

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;
  
})