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

  • 相关阅读:
    SQL Server中的Merge关键字
    详解公用表表达式(CTE)
    SQL Server优化50法
    Chrome下的脚本管理器
    初步设计了一下视频工具合集的界面
    迅雷的剪贴板冲突好强大
    在C#中用MediaInfo获取视频或音频的属性
    用Command模式简单的实现Undo&Redo功能
    用DoddleReport快速生成报表
    移动支付时代早日来临吧
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-shi-liu-gun-dong-tiao.html
Copyright © 2011-2022 走看看