Ionic JavaScript滚动 Ionic JavaScript弹出窗口 Ionic JavaScript侧面菜单 在Ionic应用程序中用于滚动操作的元素称为 Ionic滚动 。 使用滚动 以下代码片段将创建可滚动容器并调整滚动模式。首先,我们将创建HTML元素并为其添加属性。我们将添加→ direction =“xy” 以允许滚动到每一侧。我们还将设置scroll元素的宽度和高度。 HTML代码 <ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px"> <div class = "scroll-container"></div> </ion-scroll> 接下来,我们将世界地图的图像添加到 div 元素中,我们在 Ionic滚动 内创建并设置其宽度和高度。 CSS代码 .scroll-container { width: 2600px; height: 1000px; background: url('../img/world-map.png') no-repeat } 当我们运行我们的应用程序时,我们可以向各个方向滚动地图。以下示例显示了地图的北美部分。 我们可以将此地图滚动到我们想要的任何部分。让我们滚动它来展示亚洲。 还有其他属性,可以应用于 Ionic滚动 。您可以在下表中查看它们。 滚动属性 属性 类型 详细 direction string 滚动的可能方向。默认值为y delegate-handle string 用于使用$ ionicScrollDelegate进行滚动识别。 locking boolean 用于一次锁定一个方向的滚动。默认值为true。 paging boolean 用于确定分页是否将与滚动一起使用。 on-refresh expression 被称为拉动刷新。 on-scroll expression 滚动时调用。 scrollbar-x boolean 是否应显示水平滚动条。默认值为true。 scrollbar-y string 是否应显示垂直滚动条。默认值为true。 zooming boolean 用于应用双指缩放。 min-zoom integer 最小缩放值。 max-zoom integer 最大缩放值。 scrollbar-x boolean 用于启用弹跳。在Android上,IOS上的默认值为true。 无限滚动 当滚动通过页面底部时,无限滚动用于触发某些行为。以下示例显示了这是如何工作的。在我们的控制器中,我们创建了一个用于向列表中添加项目的功能。当滚动通过加载的最后一个元素的10%时,将添加这些项目。这将继续,直到我们达到30个加载元素。每次加载完成后, on-infinite 将播放 scroll.infiniteScrollComplete 事件。 HTML代码 <ion-list> <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item> </ion-list> <ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()" distance = "10%"></ion-infinite-scroll> 控制器代码 .controller('MyCtrl', function($scope) { $scope.items = []; $scope.noMoreItemsAvailable = false; $scope.loadMore = function() { $scope.items.push({ id: $scope.items.length}); if ($scope.items.length == 30) { $scope.noMoreItemsAvailable = true; } $scope.$broadcast('scroll.infiniteScrollComplete'); }; }) 其他属性也可以与 Ionic无限滚动一起使用 。其中一些列在下表中。 滚动属性 属性 类型 详细 on-infinite expression 滚动到底部时应该调用什么。 distance string 距离底部的距离需要触发无限表达。 spinner string 装载时应显示什么旋转器 immediate-check Boolean 加载屏幕时应该调用“on-infinite” 滚动代表 Ionic提供委托以完全控制滚动元素。可以通过向控制器注入 $ ionicScrollDelegate 服务来使用它,然后使用它提供的方法。 以下示例显示了20个对象的可滚动列表。 HTML代码 <div class = "list"> <div class = "item">Item 1</div> <div class = "item">Item 2</div> <div class = "item">Item 3</div> <div class = "item">Item 4</div> <div class = "item">Item 5</div> <div class = "item">Item 6</div> <div class = "item">Item 7</div> <div class = "item">Item 8</div> <div class = "item">Item 9</div> <div class = "item">Item 10</div> <div class = "item">Item 11</div> <div class = "item">Item 12</div> <div class = "item">Item 13</div> <div class = "item">Item 14</div> <div class = "item">Item 15</div> <div class = "item">Item 16</div> <div class = "item">Item 17</div> <div class = "item">Item 18</div> <div class = "item">Item 19</div> <div class = "item">Item 20</div> </div> <button class = "button" ng-click = "scrollTop()">Scroll to Top!</button> 控制器代码 .controller('DashCtrl', function($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }) 上面的代码将生成以下屏幕 当我们点击按钮时,滚动将移动到顶部。 现在,我们将介绍所有 $ ionicScrollDelegate 方法。 代表方法 方法 参数 类型 详细 scrollTop(parameter) shouldAnimate boolean 应滚动动画。 scrollBottom(parameter) shouldAnimate boolean 应滚动动画。 scrollTo(parameter1, parameter2, parameter3) left, top, shouldAnimate number, number, integer 前两个参数确定x和y轴偏移的值。 scrollBy(parameter1, parameter2, parameter3) left, top, shouldAnimate number, number, integer 前两个参数确定x和y轴偏移的值。 zoomTo(parameter1, parameter2, parameter3, parameter4) level, animate, originLeft, originTop number, boolean, number, number level用于确定要缩放的级别。originLeft和originRight协调缩放应该发生的位置。 zoomBy(parameter1, parameter2, parameter3, parameter4) factor, animate, originLeft, originTop number, boolean, number, number factor用于确定要缩放的因子。originLeft和originRight协调缩放应该发生的位置。 getScrollPosition() / / 返回具有两个数字作为属性的对象:left和right。这些数字分别代表用户从左侧和顶部滚动的距离。 anchorScroll(parameter1) shouldAnimate boolean 它将滚动到与window.location.hash具有相同id的元素。如果此元素不存在,它将滚动到顶部。 freezeScroll(parameter1) shouldFreeze boolean 用于禁用特定滚动的滚动。 freezeAllScrolls(parameter1) shouldFreeze boolean 用于禁用应用程序中所有滚动的滚动。 getScrollViews() / object 返回scrollView对象。 $getByHandle(parameter1) handle string 用于将方法连接到具有相同句柄的特定滚动视图。 $ionicScrollDelegate. $getByHandle('my-handle').scrollTop(); Ionic JavaScript弹出窗口 Ionic JavaScript侧面菜单