在前端开发中，页面的滚动效果往往能够提升用户体验，其中无限循环滚动效果更是常见的展示方式。而在 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() 方法：
-- -------------------- ---- -------
-------- -------------------- -
---------- - ---
--- ---- - - -- - -- ---- ---- -
-------------------
-
------------ - --------------
------------- - ---------- -
------ ----------------------------- - -- - -----
--
-
--------------------------------------- - -----------
------ -
----------- -------- -- - ------ ------------------ --
------------ -------- -- - ------ ------------------- -
--
--
--------------------------------------------- - ---------- -
--- ---- - -----
----------------------
------------- - ---------- -
------ ----------------------------- - -- - -----
--
-- ---
--这里的代码实现了一个类似于类似于走马灯的效果，每次只显示 8 个元素，当窗口宽度改变时，当前展示的元素个数也会做相应调整。
总结
ng-repeat-sly 是 Angular.js 中一个非常实用的指令，通过它我们可以实现各种无限循环滚动效果。上面的示例仅仅是开始的尝试，未来我们还有很多扩展和改进的方向，可以提升用户体验的同时，更好地创作出令人惊叹的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b1c7f1add4f0e0ffafacc8