ionic 滚动条


本文整理自网络,侵删。

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
(可选)
字符串

该句柄利用$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('https://www.W3Cschool.cn/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS 代码

body {
  cursor: url('/statics/demosource/finger.png'), auto;
}

JavaScript 代码

angular.module('ionicApp', ['ionic']);

尝试一下 ?


ion-infinite-scroll

当用户到达页脚或页脚附近时,ionInfiniteScroll指令允许你调用一个函数 。

阅读剩余部分

相关阅读 >>

ionic 头部和底部

ionic 单选框操作

ionic 上拉菜单

ionic 颜色

ionic 浮动框

ionic 选项卡栏操作

ionic 复选框

ionic bootstrap区别是什么

ionic 滑动框

ionic 单选框

更多相关阅读请进入《ionic》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...