减小字体
增大字体- ·上一篇文章：ionic 对话框
- ·下一篇文章：ionic 侧栏菜单
ionic 滚动条
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.k88.net/try/demo_source/Europe_geological_map-en.jpg') repeat"></div></ion-scroll>CSS 代码body { cursor: url('http://www.k88.net/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(可选)布尔值是否应用滚动动画。
ionic 滚动条
