ionic 滚动条 ion-scroll 用于创建一个可滚动的容器
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
(可选)
|
字符串 |
该句柄利用 |
direction
(可选)
|
字符串 |
滚动的方向。 'x' 或 'y'。 默认 'y'。 |
paging
(可选)
|
布尔值 |
分页是否滚动。 |
on-refresh
(可选)
|
表达式 |
调用下拉刷新, 由 |
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.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>
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
(可选)
|
布尔值 |
是否应用滚动动画。 |
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic']);
</script>
<style type="text/css">
body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}
</style>
</head>
<body>
<ion-view title="Home" hide-nav-bar="true">
<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>
</ion-view>
</body>
</html>
ionic 滚动条 ion-scroll 用于创建一个可滚动的容器的更多相关文章
- ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程
从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- WInform 创建一个简单的WPF应用
(一)创建一个简单的WPF应用 首先,在这里我要说明的是:这里的例子,都是通过控制台程序来创建WPF应用,而非使用现成的WPF模版.因为WPF模版封装了创建WPF应用所需要的各种基本元素,并不利于我们 ...
- angular创建一个独立弹窗服务
1.说明: 这个服务用于创建一个modal(弹窗),通常下,这个弹窗会插入到body的底部,并且拥有自己的作用域($scope),也可以和外界通讯. 2.逻辑: (1).创建模版 (2).拿到模版里要 ...
- 在iOS 4中创建一个LDGradientView样式的渐变视图
本教程将演示如何在 Swift 4 中创建一个多功能的.@IBDesignable 样式的渐变视图类.你可以将 CAGradientView 放到 storyboard 中,并在设计时预览,或者以编程 ...
- 17.1.1.3 Creating a User for Replication 创建一个用于用于复制:
17.1.1.3 Creating a User for Replication 创建一个用于用于复制: 每个slave 连接到master 使用一个MySQL 用户名和密码, 因此必须有一个用户账户 ...
- Ionic 2 中创建一个照片倾斜浏览组件
内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- Ionic 2 中的创建一个闪视卡片组件
闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...
随机推荐
- 【C++】清空一个C++栈的快速方法
来源:https://stackoverflow.com/questions/40201711/how-can-i-clear-a-stack-in-c-efficiently/40201744 传统 ...
- 前端实现预览ppt,word,xls,pdf文件
1.前端实现pdf文件在线预览功能 ps:刚好工作上有这个需求,所以到处找了一下处理方案,大家有需要可以试一下这几种方案,找到合适自己的 方式一. pdf文件理论上可以在浏览器直接打开预览但是需要打开 ...
- Eureka配置详解(转)
Eureka客户端配置 1.RegistryFetchIntervalSeconds 从eureka服务器注册表中获取注册信息的时间间隔(s),默认为30秒 2.InstanceInfoR ...
- 笔记53 Mybatis快速入门(四)
动态SQL 1.if 假设需要对Product执行两条sql语句,一个是查询所有,一个是根据名称模糊查询.那么按照现在的方式,必须提供两条sql语句:listProduct和listProductBy ...
- sqlmap 使用方法及实例
注:标黄处为输入内容 批注为得到的信息 1.-u url --dbs 爆数据库 [root@Hacker~]# Sqlmap -u http://www.lbgold.com/article_ ...
- Centos6.5 安装 LAMP
Centos 安装 LAMP 系统: Centos 6.5 Apache 2.4 + PHP 7.2 + Mysql 5.7 准备工作 centos 查看版本 查看 centos版本 How to C ...
- 关于h5打包后 wag包无法安装的问题
如果不是逻辑错误,那么有可能是下列三种情况之一, 1 wgt打包时的appid与安装包不符 2 打包wgt文件和打包安装包文件 用的不是同一个HBuilder账户 3 安装包打包时权限配置,和wgt包 ...
- SSM基本配置
1. 首先从web.xml配置入手 A: <!-- spring的监听器 --> <listener> <listener-class>org.springfram ...
- 【转】Git 修改已提交的commit注释
https://www.jianshu.com/p/098d85a58bf1 [重点] 通过git rebase -i HEAD~2 你想修改哪条注释 就把哪条注释前面的pick换成edit git ...
- jsonp的原理,应用场景,优缺点
在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作 另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,ifra ...