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="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 代码

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

  };

}



Ionic Js十六：滚动条的更多相关文章

  1. Ionic Js十：加载动作

    $ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...

  2. Ionic Js十九：加载动画

    ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG.  实例 HTML 代码 <ion-c ...

  3. Ionic Js十八：滑动框

    ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下:   用法 <ion-slide-box on-slide-changed="slid ...

  4. Ionic Js十五：对话框

    $ionicPopup ionic 对话框服务允许程序创建.显示弹出窗口. $ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() . 实例 HTML 代 ...

  5. Ionic Js十四：浮动框

    $ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框. 实例 HTML 代码 <p> <button ng-click="open ...

  6. Ionic Js十二：导航ion-nav-view

     ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史.通过检测浏览历史,实现向左或向右滑动时可以正确转换视图. 采用AngularUI路由器模块等应用程序接口可以分为 ...

  7. js上 十六、数组-2

    十六.数组-2 #4.3万能法:splice(): #4.3.1.删除功能 ​ 语法:arr.splice(index,num); //num表示删除的长度 ​ 功能:从下标index位置开始,删除n ...

  8. vue.js 第十课-第十六课

    第十课: http://note.youdao.com/noteshare?id=25b5ba45286464856f21eb4b6b391ecd&sub=19C4429995384F72BD ...

  9. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

随机推荐

  1. [Luogu 1073] NOIP2009 最优贸易

    [Luogu 1073] NOIP2009 最优贸易 分层图,跑最长路. 真不是我恋旧,是我写的 Dijkstra 求不出正确的最长路,我才铤而走险写 SPFA 的- #include <alg ...

  2. 接口测试Case之面向页面对象编写及规范

    一.什么是页面对象化 主要提倡的思想是:万物皆对象,即把一个Page看成一个对象,来进行接口自动化Case的编写,不要闲扯,直接讲怎么个操作法呢? 二.有什么优势? 2.1 Case层次清晰,便于管理 ...

  3. jQuery 动态标签生成插件

    前言: 最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法.高深的语法几乎没有,就有一 ...

  4. [译]Quartz.NET 框架 教程（中文版）2.2.x 之第八课 调度监听器

    第八课 调度监听器 调度监听器和触发监听器和触发监听器.作业任务监听器非常相似,只是调度监听器在调度器内接收通知事件,而不需要关联具体的触发器或作业任务事件. 跟调度监听器相关的事件,添加作业任务/触 ...

  5. 51nod 小Z的trie（Trie+广义SAM）

    [题目链接] http://www.51nod.com/contest/problem.html#!problemId=1647 [题意] 给定一个n个字符串的Trie,每次询问一个字符串在Trie上 ...

  6. [CodePlus 2017 11月赛&洛谷P4058]木材 题解（二分答案）

    [CodePlus 2017 11月赛&洛谷P4058]木材 Description 有 n棵树,初始时每棵树的高度为 Hi ,第 i棵树每月都会长高 Ai.现在有个木料长度总量为 S的订单, ...

  7. Google Congestion Control介绍

    随着网络带宽的日益增加和便携式设备,如智能手机或平板电脑处理能力的增强,基于互联网的实时通信已经成为热点. 虽然视频会议已商用了多年,特别是SKYPE这样的视频应用在互联网上已有10年时间,但针对实时 ...

  8. D - Balanced Ternary String （贪心）

    题目链接:http://codeforces.com/contest/1102/problem/D 题目大意:给你一个字符串,这个字符串是由0,1,2构成的,然后让你替换字符,使得在替换的次数最少的前 ...

  9. 基于Ubuntu搭建GMS测试环境

    一.版本信息: 系统版本:Ubuntu 18.04.2 LTS JDK版本: 1.8.0_171 SDK版本:android-sdk_r24.4.1-linux.tgz ADB版本:1.0.40 ap ...

  10. 音频增益响度分析 ReplayGain 附完整C代码示例【转】

    转自:http://www.cnblogs.com/cpuimage/p/8846951.html 人们所熟知的图像方面的3A算法有: AF自动对焦(Automatic Focus)自动对焦即调节摄像 ...