本文整理自网络,侵删。
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('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》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者