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

  • 相关阅读:
    Windows安装nginx服务
    高血压食谱 芹菜苦瓜可以降压吗
    非IT,零经验,零基础怎么备考信息系统项目管理师/高项考试?
    为什么要用urlencode()函数进行url编码
    Redis哨兵机制
    Qt 自定义QToolButton 自己互斥同时工具按钮之间实现互斥
    QItemSelectionModel获取QModelIndexList程序崩溃
    Qt QListView scrollTo定位指定项 和 LayoutMode布局的简单用法
    Sublime Text3 离线安装中文插件
    VSCODE导出PDF的数学公式
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-shi-liu-gun-dong-tiao.html
Copyright © 2020-2023  润新知