阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 滚动条

      ion-scroll

      ion-scroll 用于创建一个可滚动的容器。

      用法

      <ion-scroll
          [delegate-handle=""]
          [direction=""]
          [paging=""]
          [on-refresh=""]
          [on-scroll=""]
          [scrollbar-x=""]
          [scrollbar-y=""]
          [zooming=""]
          [min-zoom=""]
          [max-zoom=""]>
          ...
      </ion-scroll>
      

      API

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

      该句柄利用$ionicScrollDelegate指定滚动视图。

      direction
      (可选)
      字符串

      滚动的方向。 'x' 或 'y'。 默认 'y'。

      paging
      (可选)
      布尔值

      分页是否滚动。

      on-refresh
      (可选)
      表达式

      调用下拉刷新, 由ionRefresher触发。

      on-scroll
      (可选)
      表达式

      当用户滚动时触发。

      scrollbar-x
      (可选)
      布尔值

      是否显示水平滚动条。默认为false。

      scrollbar-y
      (可选)
      布尔值

      是否显示垂直滚动条。默认为true。

      zooming
      (可选)
      布尔值

      是否支持双指缩放。

      min-zoom
      (可选)
      整数

      允许的最小缩放量(默认为0.5)

      max-zoom
      (可选)
      整数

      允许的最大缩放量(默认为3)

      实例

      HTML 代码

      <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
          <div style="width: 5000px; height: 5000px; background: url('http://www.axihe.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
      </ion-scroll>
      

      CSS 代码

      body {
        cursor: url('http://www.axihe.com/try/demo_source/finger.png'), auto;
      }
      

      JavaScript 代码

      angular.module('ionicApp', ['ionic']);
      

      ion-infinite-scroll

      当用户到达页脚或页脚附近时,ionInfiniteScroll 指令允许你调用一个函数 。

      当用户滚动的距离超出底部的内容时,就会触发你指定的 on-infinite。

      用法

      <ion-content ng-controller="MyController">
        <ion-infinite-scroll
          on-infinite="loadMore()"
          distance="1%">
        </ion-infinite-scroll>
      </ion-content>
      
      function MyController($scope, $http) {
        $scope.items = [];
        $scope.loadMore = function() {
          $http.get('/more-items').success(function(items) {
            useItems(items);
            $scope.$broadcast('scroll.infiniteScrollComplete');
          });
        };
      
        $scope.$on('stateChangeSuccess', function() {
          $scope.loadMore();
        });
      }
      

      当没有更多数据加载时,就可以用一个简单的方法阻止无限滚动,那就是 angular 的 ng-if 指令:

      <ion-infinite-scroll
        ng-if="moreDataCanBeLoaded()"
        icon="ion-loading-c"
        on-infinite="loadMoreData()">
      </ion-infinite-scroll>
      

      API

      属性类型详情
      on-infinite表达式

      当滚动到底部时触发的事件。

      distance
      (可选)
      字符串

      从底部滚动到触发on-infinite表达式的距离。默认: 1%。

      icon
      (可选)
      字符串

      当加载时显示的图标。默认: 'ion-loading-d'。

      $ionicScrollDelegate

      授权控制滚动视图(通过 ion-content 和 ion-scroll 指令创建)。

      该方法直接被 $ionicScrollDelegate 服务触发,来控制所有滚动视图。用 $getByHandle 方法控制特定的滚动视图。

      用法

      <body ng-controller="MainCtrl">
        <ion-content>
          <button ng-click="scrollTop()">滚动到顶部!</button>
        </ion-content>
      </body>
      
      function MainCtrl($scope, $ionicScrollDelegate) {
        $scope.scrollTop = function() {
          $ionicScrollDelegate.scrollTop();
        };
      }
      

      方法

      resize()
      

      告诉滚动视图重新计算它的容器大小。

      scrollTop([shouldAnimate])
      
      
      参数类型详情
      shouldAnimate
      (可选)
      布尔值

      是否应用滚动动画。

      scrollBottom([shouldAnimate])
      
      参数类型详情
      shouldAnimate
      (可选)
      布尔值

      是否应用滚动动画。

      卖前端学习教程

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

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

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

      目录
      目录