Ionic-JavaScript滚动 - 芒果文档

📌 相关文章

📜 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();