📜  Ionic-JavaScript滚动

📅  最后修改于: 2020-12-08 05:11:07             🧑  作者: Mango


离子应用程序中用于滚动操作的元素称为ion-scroll

使用滚动

以下代码段将创建可滚动容器并调整滚动模式。首先,我们将创建HTML元素并为其添加属性。我们将添加→ direction =“ xy”以允许滚动到每一侧。我们还将设置滚动元素的宽度和高度。

HTML代码


   

接下来,我们将世界地图的图像添加到div元素中,该元素是在离子卷轴内部创建的,并设置其宽度和高度。

CSS代码

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

运行我们的应用程序时,我们可以在各个方向上滚动地图。以下示例显示了地图的北美部分。

离子Javascript滚动开始

我们可以将此地图滚动到所需的任何部分。让我们滚动它来显示亚洲。

离子Javascript滚动结束

还有其他属性可以应用于ion-scroll 。您可以在下表中检查它们。

滚动属性

Attribute Type Details
direction string Possible directions of the scroll. Default value is y
delegate-handle string Used for scroll identification with $ionicScrollDelegate.
locking boolean Used to lock scrolling in one direction at a time. Default value is true.
paging boolean Used to determine if the paging will be used with scroll.
on-refresh expression Called on pull-to-refresh.
on-scroll expression Called when scrolling.
scrollbar-x boolean Should horizontal scroll bar be shown. Default value is true.
scrollbar-y string Should vertical scroll bar be shown. Default value is true.
zooming boolean Used to apply pinch-to-zoom.
min-zoom integer Minimal zoom value.
max-zoom integer Maximal zoom value.
scrollbar-x boolean Used to enable bouncing. Default value on IOS is true, on Android false.

无限滚动

当滚动通过页面底部时,无限滚动用于触发某些行为。以下示例显示了它的工作原理。在我们的控制器中,我们创建了一个用于将项目添加到列表的函数。当滚动通过最后加载的元素的10%时,将添加这些项目。这将持续到我们击中30个已加载的元素。每次加载完成时, on-infinite都会广播scroll.infiniteScrollComplete事件。

HTML代码


   Item {{ item.id }}



控制器代码

.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');
   };
})

其他属性也可以与ion-infinite-scroll一起使用。下表列出了其中一些。

滚动属性

Attribute Type Details
on-infinite expression What should be called when scrolled to the bottom.
distance string The distance from the bottom needed to trigger on-infinite expression.
spinner string What spinner should be shown while loading
immediate-check Boolean Should ‘on-infinite’ be called when screen is loaded

滚动代表

Ionic提供委托以完全控制滚动元素。可以通过将$ ionicScrollDelegate服务注入控制器,然后使用其提供的方法来使用它。

以下示例显示了20个对象的可滚动列表。

HTML代码

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

控制器代码

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

   $scope.scrollTop = function() {
      $ionicScrollDelegate.scrollTop();
   };
})   

上面的代码将产生以下屏幕-

离子Javascript滚动底部

当我们点击按钮时,滚动条将移至顶部。

离子Javascript滚动顶部

现在,我们将介绍所有$ ionicScrollDelegate方法。

委托方法

Method Parameters Type Details
scrollTop(parameter) shouldAnimate boolean Should scroll be animated.
scrollBottom(parameter) shouldAnimate boolean Should scroll be animated.
scrollTo(parameter1, parameter2, parameter3) left, top, shouldAnimate number, number, integer First two parameters determine value of the x, and y-axis offset.
scrollBy(parameter1, parameter2, parameter3) left, top, shouldAnimate number, number, integer First two parameters determine value of the x, and y-axis offset.
zoomTo(parameter1, parameter2, parameter3, parameter4) level, animate, originLeft, originTop number, boolean, number, number level is used to determine level to zoom to. originLeft and originRight coordinates where the zooming should happen.
zoomBy(parameter1, parameter2, parameter3, parameter4) factor, animate, originLeft, originTop number, boolean, number, number factor is used to determine factor to zoom by. originLeft and originRight coordinates where the zooming should happen.
getScrollPosition() / / Returns object with two number as properties: left and right. These numbers represent the distance the user has scrolled from the left and from the top respectively.
anchorScroll(parameter1) shouldAnimate boolean It will scroll to the element with the same id as the window.loaction.hash. If this element does not exist, it will scroll to the top.
freezeScroll(parameter1) shouldFreeze boolean Used to disable scrolling for particular scroll.
freezeAllScrolls(parameter1) shouldFreeze boolean Used to disable scrolling for all the scrolls in the app.
getScrollViews() / object Returns the scrollView object.
$getByHandle(parameter1) handle string Used to connect methods to the particular scroll view with the same handle.
$ionicScrollDelegate. $getByHandle(‘my-handle’).scrollTop();