在前端开发中，页面的滚动效果往往能够提升用户体验，其中无限循环滚动效果更是常见的展示方式。而在 Angular.js 中，通过 ng-repeat-sly 指令，我们可以实现无限循环滚动的效果。
ng-repeat-sly 的基本用法
ng-repeat-sly 是 Sly.js 的 Angular.js 指令封装，使用前需要先引入 Sly.js 和 Angular.js 。
---- -- ------ - ---------- --- ------- -------------------------- ------- --------------------------
接下来，在使用 ng-repeat-sly 指令时，需要使用 Sly.js 中提供的 sly-repeat 指令，如下所示：
---- ------------- ---------------
--- -------------- ---------------- -- -------
-----------------
-----
------其中，frame 标签代表滚动的区域，slidee 标签代表滚动的内容，sly-horizontal 属性表示滚动方向为水平。ng-repeat-sly 的核心指令是 sly-repeat，在这里通过类似 ng-repeat 指令的语法，指定了需要循环展示的数据，即 items 数组中的每一个元素。
ng-repeat-sly 实现无限循环滚动
接下来，我们通过一些复杂的示例来理解如何实现无限循环滚动。
无限循环滚动的基本实现
---- ------------- ---------------
--- -------------- ---------------- -- ------ ---------------------
-----------------
-----
------在上面的示例中，添加了 sly-start-index="-1" 属性。这个主要是为了实现无限循环滚动的效果，即在滚动到最后一个元素时，接着就会展示第一个元素，以此类推。
这样在数据集合后面复制一份之后，在用户向右滑动时，会先滑过复制出的那一份集合的内容，当真正的集合开始出现在视口中时，sly 会快速地跳转回集合开头，以此来实现循环滚动的效果。
页面中间开始始终展示当前元素的示例：
---- ------------- ---------------
--- -------------- ---------------- -- ------ -------------------- ---------------------- --------------------------
-----------------
-----
------在上面的示例中，我们添加了两个属性：sly-center-item="true" 和 sly-active-item="current"。其中，sly-center-item 属性表示中心位置一直展示当前元素，即居中展示。而 sly-active-item 属性则表示当前选中的元素，这个属性需要在控制器中动态设置，比如：
-------------- - ----------------
实现自定义滚动效果的示例：
我们可以更改滚动效果的演示代码。通过改变 render 视口大小的方式，我们可以达到不同的效果。如下面的例子，控制器绑定了一个当改变 render 视口大小时被触发的事件，以当前宽度作为一个基准，动态计算当前li的最小宽度，以达到动态变更每屏显示的数量的目的：
---- ------------- ------------------------------- --- ------------------------------- --------------------------------- -- ------
--- -------------- ---------------- -- ------ ---------------------
--- ------------------- -- ------ ----------------- ----------------------------------
-----
------对于控制器 CarouselController 对象，需要实现 updateDimensions() 方法：
-------- -------------------- -
---------- - ---
--- ---- - - -- - -- ---- ---- -
-------------------
-
------------ - --------------
------------- - ---------- -
------ ----------------------------- - -- - -----
--
-
--------------------------------------- - -----------
------ -
----------- -------- -- - ------ ------------------ --
------------ -------- -- - ------ ------------------- -
--
--
--------------------------------------------- - ---------- -
--- ---- - -----
----------------------
------------- - ---------- -
------ ----------------------------- - -- - -----
--
-- ---
--这里的代码实现了一个类似于类似于走马灯的效果，每次只显示 8 个元素，当窗口宽度改变时，当前展示的元素个数也会做相应调整。
总结
ng-repeat-sly 是 Angular.js 中一个非常实用的指令，通过它我们可以实现各种无限循环滚动效果。上面的示例仅仅是开始的尝试，未来我们还有很多扩展和改进的方向，可以提升用户体验的同时，更好地创作出令人惊叹的页面。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b1c7f1add4f0e0ffafacc8