阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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
      (可选)
      布尔值

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

      auto-play
      (可选)
      boolean

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

      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 {
        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的教程都有!

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

      目录
      目录