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

?

时间: 2024-10-13 21:02:51

Ionic Js十六:滚动条的相关文章

Ionic Js十:加载动作

$ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .controller('LoadingCtrl', function($scope, $ionicLoading) { $scope.show = function() { $ionicLoading.show({ template: 'Loading...' }); }; $scope.hide = fu

Ionic Js十八:滑动框

ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: ? ? 用法 <ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slid

Ionic Js十九:加载动画

ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. ? 实例 HTML 代码 <ion-content scroll="false" class="has-header"> <p> <ion-spinner icon="android"></ion-spinner> <ion-spinner

Ionic Js十二:导航ion-nav-view

? ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史.通过检测浏览历史,实现向左或向右滑动时可以正确转换视图. 采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态).Angular的核心为路由服务,URLs可以用来控制视图. AngularUI路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个以上模板呈现在同一个页面. 此外,每个状态无需绑定到一个URL,并且数据可以更灵活地推送到每个状态. 以下实例中,

Senparc.Weixin.MP SDK 微信公众平台开发教程(十六):AccessToken自动管理机制

Senparc.Weixin.MP SDK 微信公众平台开发教程(十六):AccessToken自动管理机制 在<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>中,我介绍了获取AccessToken(通用接口)的方法. 在实际的开发过程中,所有的高级接口都需要提供AccessToken,因此我们每次在调用高级接口之前,都需要执行一次获取AccessToken的方法,例如: 1 var accessToken = AccessTokenContainer.

微信小程序把玩(三十六)Storage API

原文:微信小程序把玩(三十六)Storage API 其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步 异步存储方法: 存数据 wx.setStorage(object) 相同key会覆盖,可写回调方法 获取方法: wx.getStorage(object) 清除方法: wx.clearStorage()里面可以写回调函数 成功,失败,完成 同步存储方法: 存数据 相同key会覆盖 wx.setStorageSync(key,data) 读数据

CSS3秘笈复习:十三章&amp;十四章&amp;十五章&amp;十六章&amp;十七章

第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮动元素.关键字:left.right或both. (2).浮动外围元素:让包含浮动元素的<div>也浮动.选择这种方法一定要在浮动容器后面的任何元素中添加一个clear属性,确保浮动元素落到容器的下方. (3).利用overflow : hidden.另一种常见的方法是在外围的样式中添加以下属性:

第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

第三百八十六节,Django+Xadmin打造上线标准的在线教育平台-HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页面返回给浏览器 一般母板里都是写的一个网页里不变的地方,也就是通用的地方,被继承页(访问页)都是每个页面不同的地方,也就是将页面不同的地方引入到母板组合成一个新页面返回浏览器 母板里一般都是网页的.头部.底部.头部底部css.头部底部js 被继承页(访问页)里一般都是新内容,新内容的css和js 母

angular学习笔记(二十六)-$http(4)-设置请求超时

本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错误 demo: html: <!DOCTYPE html> <html ng-app = 'HttpGet'> <head> <title>18.4 $http(2)</title> <meta charset="utf-8"