ionic 滚动条滚动条是什么

yuyutoo 2024-10-12 00:22 11 浏览 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 (可选)	`字符串`	该句柄利用`$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）

实例

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 (可选)	`布尔值`	是否应用滚动动画。

css滚动条

上一篇：实现网页浏览器滚动条同步的滚动进度条
下一篇：vue实现滑块拖拽校验 vue滑动验证

ionic 滚动条滚动条是什么

相关推荐

取消回复欢迎你发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

推荐7个模板代码和其他游戏源码下载的网址

其实模版网站在开发工作中很重要，推荐几个参考站给大家

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源带详细搭建教程

ionic 滚动条 滚动条是什么

相关推荐

取消回复欢迎 你 发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

推荐7个模板代码和其他游戏源码下载的网址

其实模版网站在开发工作中很重要，推荐几个参考站给大家

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程 织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源 带详细搭建教程

ionic 滚动条滚动条是什么

取消回复欢迎你发表评论:

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程