阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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