阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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

    <tr>
      <td>
        delegate-handle
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    字符串

    属性 类型 详情

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

      </td>
    </tr>
    
    <tr>
      <td>
        does-continue
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    布尔值

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

      </td>
    </tr>
    <tr>
      <td>
        auto-play
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    boolean

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

      </td>
    </tr>
    <tr>
      <td>
        slide-interval
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    数字

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

      </td>
    </tr>
    
    <tr>
      <td>
        show-pager
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    布尔值

    滑动框的页面是否显示。

      </td>
    </tr>
    
    <tr>
      <td>
        pager-click
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    表达式

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

      </td>
    </tr>
    
    <tr>
      <td>
        on-slide-changed
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    表达式

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

      </td>
    </tr>
    
    <tr>
      <td>
        active-slide
    
        <div><em>(可选)</em></div>
      </td>
      <td>
    

    表达式

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

      </td>
    </tr>
    

    实例

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

    angular.module('ionicApp', ['ionic'])
    
    .controller('SlideController', function($scope) {
    
      $scope.myActiveSlide = 1;
    
    })
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录