滚动条
编辑教程滚动条
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('https://www.jsrun.cn/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
CSS 代码
body {
cursor: url('//www.jsrun.cn/statics/demosource/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(可选) | 布尔值 | 是否应用滚动动画。 |
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
选择支付方式:
立即支付
¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟