欢迎光临
梦想从学习开始!

ionic 滑动框 | 小熊教程

ionic 滑动框

Tips:您正在学习的是ionic 滑动框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8690 ,您可通过标签查询系列课程。祝您学习愉快!


ion-slide-box

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

效果图如下:

用法

Tips:您正在学习的是ionic 滑动框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8690 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <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

Tips:您正在学习的是ionic 滑动框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8690 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

属性 类型 详情
delegate-handle (可选) 字符串

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

does-continue (可选) 布尔值

滑动框是否开启循环滚动。

auto-play (可选) boolean

设置滑动框是否循环播放,如果 does-continue 为 true,默认也为 true。

slide-interval (可选) 数字

等待多少毫秒开始滑动(如果继续则为true)。默认为4000。

show-pager (可选) 布尔值

滑动框的页面是否显示。

pager-click (可选) 表达式

当点击页面时,触发该表达式(如果shou-pager为true)。传递一个’索引’变量。

on-slide-changed (可选) 表达式

当滑动时,触发该表达式。传递一个’索引’变量。

active-slide (可选) 表达式

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


实例

HTML 代码

Tips:您正在学习的是ionic 滑动框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8690 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <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 代码

Tips:您正在学习的是ionic 滑动框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8690 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 .slider {   height: 100%; } .slider-slide {   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; } .box{    height:100%;  }  .box h1{   position:relative; top:50%; transform:translateY(-50%);  } 

JavaScript 代码

Tips:您正在学习的是ionic 滑动框 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8690 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 angular.module('ionicApp', ['ionic'])  .controller('SlideController', function($scope) {      $scope.myActiveSlide = 1;    }) 

赞(0) 打赏
未经允许不得转载:小熊分享邦 » ionic 滑动框 | 小熊教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏