ionic 滚动条 滚动条是什么
yuyutoo 2024-10-12 00:22 14 浏览 0 评论
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 (可选) | 布尔值 | 是否应用滚动动画。 |
相关推荐
- 从零搭建高可用的 MySQL 主从复制架构(基于 Linux 实战指南)
-
背景在生产环境中，单点MySQL数据库容易成为性能瓶颈或单点故障源。搭建MySQL主从复制架构，可以实现读写分离、高可用，提升系统的整体稳定性与扩展性。...
- 国外大神成功让Nexus4吃上安卓6.0:基本可正常使用
-
IT之家讯10月9日消息谷歌已经于10月6日正式开启了Nexus设备Android6.0Marshmallow系统的OTA升级推送。根据之前报道的消息，老一批的Nexus手机如Nexus4/Ne...
- 急死!CPU被挖矿了，却找不到哪个进程
-
CPU起飞了最近有朋友在群里反馈，自己服务器的CPU一直处于高占用状态，但用...
- 甜甜的安卓5.0却让手机ROOT难度大大增加
-
IT之家（www.ithome.com）：甜甜的安卓5.0却让手机ROOT难度大大增加对设备进行ROOT，毫无疑问，这是安卓最美丽的地方之一，不管是对于消费者来说还是开发者。Root意味着掌握更多的权...
- Linux基础知识（linux基础知识点及答案）
-
系统目录结构/bin：命令和应用程序。/boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。/dev：dev是Device(设备)的缩写,该目录...
- Linux 内核 6.15 发布:内存、网络、文件系统全面升级!
-
核心增强：性能与安全双飞升！Linux内核6.15的正式版！虽然因一个临门一脚的Bug晚了几小时，但最终还是带着一堆硬核更新闪亮登场！...
- AlmaLinux 9.6 发布，新增功能亮点纷呈!
-
距离上一版本AlmaLinux9.5发布六个月后，基于5.14内核的AlmaLinux正式宣布其企业级Linux发行版的9.x系列第六个更新——AlmaLinux9.6（Sag...
- 理解Linux下的SELinux（linux seccomp）
-
理解Linux下的SELinux长久以来，每当遇到授权问题或者新安装的主机，我的第一反应是通过setenforce0命令禁用SELinux，来减少产生的权限问题，但是这并不是一个良好的习惯。这篇文章...
- 3个简单实用的网址导航网站（简洁的网站导航）
-
在我们使用电脑上网的时候经常会访问某些常用的网站，每一次都去通过搜索访问就比较浪费时间，添加在浏览器收藏夹不方便在其他电脑使用。找一个好用的网址导航网站就可以帮我们把所有常用的网址集合在一个页面，方便...
- 整点不一样的网站制作教程，教你怎么用网站模板制作网站#...
-
网站制作教程整点不一样的网站。不要再问我网站制作教程了，今天给你整个怎么用网站模板制作网站的教程。·1、登录账号进入后台。·2、选择模板。自助建站平台通常提供各种各样的网站模板，可以根据自己的需求和喜...
- 5个最好的外贸独立站模板，让你的网站更加专业
-
作为外贸行业从业者，一个专业且具有吸引力的网站是必不可少的。然而，建立一个专业的网站需要耗费大量的时间和精力，尤其是在设计和开发方面。为了帮助您缩短网站建设的时间和成本，以下是5个最好的外贸独立站模板...
- 网站建设模板 **网站建设模板:全面指南与创意构思*
-
网站建设模板**网站建设模板：全面指南与创意构思**随着互联网技术的迅猛发展，网站已成为企业、机构和个人展示自身形象、传递信息、实现交流的重要平台。本文将详细介绍网站建设的基本模板，并提供创意...
- 原地封神!一个只用套模板即可制作电子相册的网站
-
对于忙碌的年轻人来说，一键操作的模板意味着无需复杂的操作步骤，就能轻松制作出精美的电子相册。但是一个好的工具也是事关重要，最近发现了一款非常适合年轻人的模板---FLBOOK在线制作电子杂志平台，只需...
- 跨屏建站网kpfree免费网站模板2023.1.14发布更新
-
跨屏建站网kpfree免费网站模板2023.1.14发布更新，摒弃了之前的卡片式设计，采用了移动优先的设计原则，简化了页面设计风格，优化了代码，优化了图片质量，确保网页打开速度。砍掉了一些花哨而无用的...
- 响应式大型电子企业集团类网站模板源码-青柠资源网qnziyw.cn
-
模板信息：模板编号：10964模板编码：UTF8模板颜色：红色模板分类：科技、电子、数码设备适合行业：电子设备类企业模板介绍：本模板自带eyoucms内核，无需再下载eyou系统，原创设计、手工书写D...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)