Angular.js 的 ng-repeat-sly：无限循环滚动-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，页面的滚动效果往往能够提升用户体验，其中无限循环滚动效果更是常见的展示方式。而在 Angular.js 中，通过 ng-repeat-sly 指令，我们可以实现无限循环滚动的效果。

ng-repeat-sly 的基本用法

ng-repeat-sly 是 Sly.js 的 Angular.js 指令封装，使用前需要先引入 Sly.js 和 Angular.js 。

<!-- 引入 Sly.js 和 Angular.js -->
<script src="angular.js"></script>
<script src="sly.min.js"></script>

接下来，在使用 ng-repeat-sly 指令时，需要使用 Sly.js 中提供的 sly-repeat 指令，如下所示：

<div class="frame" sly-horizontal>
  <ul class="slidee" sly-repeat="item in items">
    <li>{{item}}</li>
  </ul>
</div>

其中，frame 标签代表滚动的区域，slidee 标签代表滚动的内容，sly-horizontal 属性表示滚动方向为水平。ng-repeat-sly 的核心指令是 sly-repeat，在这里通过类似 ng-repeat 指令的语法，指定了需要循环展示的数据，即 items 数组中的每一个元素。

ng-repeat-sly 实现无限循环滚动

接下来，我们通过一些复杂的示例来理解如何实现无限循环滚动。

无限循环滚动的基本实现

<div class="frame" sly-horizontal>
  <ul class="slidee" sly-repeat="item in items" sly-start-index="-1">
    <li>{{item}}</li>
  </ul>
</div>

在上面的示例中，添加了 sly-start-index="-1" 属性。这个主要是为了实现无限循环滚动的效果，即在滚动到最后一个元素时，接着就会展示第一个元素，以此类推。

这样在数据集合后面复制一份之后，在用户向右滑动时，会先滑过复制出的那一份集合的内容，当真正的集合开始出现在视口中时，sly 会快速地跳转回集合开头，以此来实现循环滚动的效果。

页面中间开始始终展示当前元素的示例：

<div class="frame" sly-horizontal>
  <ul class="slidee" sly-repeat="item in items" sly-start-index="-1" sly-center-item="true" sly-active-item="current">
    <li>{{item}}</li>
  </ul>
</div>

在上面的示例中，我们添加了两个属性：sly-center-item="true" 和 sly-active-item="current"。其中，sly-center-item 属性表示中心位置一直展示当前元素，即居中展示。而 sly-active-item 属性则表示当前选中的元素，这个属性需要在控制器中动态设置，比如：

$scope.current = $scope.items[0];

实现自定义滚动效果的示例：

我们可以更改滚动效果的演示代码。通过改变 render 视口大小的方式，我们可以达到不同的效果。如下面的例子，控制器绑定了一个当改变 render 视口大小时被触发的事件，以当前宽度作为一个基准，动态计算当前li的最小宽度，以达到动态变更每屏显示的数量的目的：

<div class="frame" sly-horizontal="{dynamicHandle: 1}" sly-change="updateDimensions()" ng-controller="CarouselController as ctrl">
  <ul class="slidee" sly-repeat="item in items" sly-start-index="-1">
    <li sly-repeat="subItem in items" ng-style="{width: ctrl.minWidth()}">{{subItem}}</li>
  </ul>
</div>

对于控制器 CarouselController 对象，需要实现 updateDimensions() 方法：

function CarouselController() {
  this.items = [];

  for (var i = 1; i <= 100; i++) {
    this.items.push(i);
  }

  this.current = this.items[0];

  this.minWidth = function() {
    return (this.$dimension.innerWidth() / 8) + 'px';
  };
}
CarouselController.prototype.$dimension = function(){ 
  return {
    innerWidth: function () { return window.innerWidth; },
    innerHeight: function () { return window.innerHeight; }
  };
};
CarouselController.prototype.updateDimensions = function() {
  var ctrl = this;
  setTimeout(function(){
    ctrl.minWidth = function() {
      return (ctrl.$dimension.innerWidth() / 8) + 'px';
    };
  }, 1);
};

这里的代码实现了一个类似于类似于走马灯的效果，每次只显示 8 个元素，当窗口宽度改变时，当前展示的元素个数也会做相应调整。

总结

ng-repeat-sly 是 Angular.js 中一个非常实用的指令，通过它我们可以实现各种无限循环滚动效果。上面的示例仅仅是开始的尝试，未来我们还有很多扩展和改进的方向，可以提升用户体验的同时，更好地创作出令人惊叹的页面。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b1c7f1add4f0e0ffafacc8