欢迎光临
梦想从学习开始!

ionic 滚动条 | 小熊教程

ionic 滚动条

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。祝您学习愉快!


ion-scroll

ion-scroll 用于创建一个可滚动的容器。

用法

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <ion-scroll     [delegate-handle=""]     [direction=""]     [paging=""]     [on-refresh=""]     [on-scroll=""]     [scrollbar-x=""]     [scrollbar-y=""]     [zooming=""]     [min-zoom=""]     [max-zoom=""]>     ... </ion-scroll> 

API

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

属性 类型 详情
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)

实例

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

HTML 代码

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

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

CSS 代码

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 body {   cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto; } 

JavaScript 代码

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 angular.module('ionicApp', ['ionic']); 


ion-infinite-scroll

当用户到达页脚或页脚附近时,ionInfiniteScroll指令允许你调用一个函数 。

当用户滚动的距离超出底部的内容时,就会触发你指定的on-infinite。

用法

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <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

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

属性 类型 详情
on-infinite 表达式

当滚动到底部时触发的事件。

distance (可选) 字符串

从底部滚动到触发on-infinite表达式的距离。默认: 1%。

icon (可选) 字符串

当加载时显示的图标。默认: ‘ion-loading-d’。


$ionicScrollDelegate

授权控制滚动视图(通过ion-content 和 ion-scroll指令创建)。

该方法直接被$ionicScrollDelegate服务触发,来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

用法

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <body ng-controller="MainCtrl">   <ion-content>     <button ng-click="scrollTop()">滚动到顶部!</button>   </ion-content> </body> 
 function MainCtrl($scope, $ionicScrollDelegate) {   $scope.scrollTop = function() {     $ionicScrollDelegate.scrollTop();   }; } 

方法

Tips:您正在学习的是ionic 滚动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8694 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 resize()

告诉滚动视图重新计算它的容器大小。

 scrollTop([shouldAnimate]) 
参数 类型 详情
shouldAnimate (可选) 布尔值

是否应用滚动动画。

 scrollBottom([shouldAnimate]) 
参数 类型 详情
shouldAnimate (可选) 布尔值

是否应用滚动动画。

赞(0) 打赏
未经允许不得转载:小熊分享邦 » ionic 滚动条 | 小熊教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏