zoukankan      html  css  js  c++  java
  • Ionic Js十六:滚动条

    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>

    HTML 代码

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

    CSS 代码

    body {
      cursor: url('http://www.runoob.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>

    $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();
      };
    }

  • 相关阅读:
    #152: 有两个由字符构成的环。请写一个程序,计算这两个字符环上最长连续公共字符串的长度。
    将博客搬至CSDN
    poj 2446 二分图最大匹配
    poj 2226 二分图最大匹配
    poj 3041 二分图最大匹配
    hdu 1054 二分图最大匹配
    二分图资料
    POJ 1469 二分图最大匹配
    hdu 5791 Two dp
    hdu 5783 Divide the Sequence 贪心
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-shi-liu-gun-dong-tiao.html
Copyright © 2011-2022 走看看