简介
ng-fiscroll 是一个 AngularJS 模块和服务指令，可用于创建快速且流畅的 iOS 式滚动效果。它将 ISCroll 5 的细节封装在 Angular 的指令中，提供了双向绑定、可重用的 HTML 组件和 CSS3 动画等功能。
安装
你可以通过 npm 或 Bower 安装 ng-fiscroll：
npm install ng-fiscroll --save
或
bower install ng-fiscroll --save
使用
导入 ng-fiscroll 的依赖
angular.module('myApp', ['fiscroll']);使用
fi-scroll指令<div fi-scroll> <!-- Content goes here --> </div>
fi-scroll指令自动处理 CSS 样式和 IScroll 设置，能够使元素可滚动或锁定（disable）滚动，并可以使用任何 HTML 内容、绑定模型、动态 CSS 类等。配置 IScroll
fi-scroll指令可以通过两个可选属性配置 IScroll 实例的行为。options属性options是一个对象，其中包含的键-值对会被传递给 IScroll 构造函数。例如，要设置 IScroll 实例的滚动边界：<div fi-scroll options="{scrollX: false}"> <!-- Content goes here --> </div>iscroll属性iscroll属性是一个函数，该函数接收 IScroll 的实例作为唯一参数。您可以使用此函数初始化或更改 IScroll 实例。例如，要在初始滚动位置上显示 div 的底部：<div fi-scroll iscroll="onInit"> <!-- Content goes here --> </div>
-- -------------------- ---- ------- -------------------------------------------- ---------------- - ------------- - ------------------------- - -- --------- --- ------ -- --- ------- -------- --- --------- - ------------------------------------ --- ------------- - ----------------------- --- ------------- - ------------------------------------- --- ------- - ---------------------- - -------------- --- -- ------ -- --- ------ -- --- ---- --------------------------- ---------- -- ---
示例
你可以在 ng-fiscroll 的 GitHub 页面 中查看使用案例和文档。
以下示例演示了如何在 AngularJS 应用程序中使用 ng-fiscroll 来启用 iOS 式滚动效果：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
------------------ ------------
----- ---------------- ------------------------------------------------------------------------------------------
-------
--------------- -
------- ------
--------- -------
------- --- ----- -----
-
--------------- -
-------- -----
-
----------------- -
----------- -------
---------- ------
------ -----
------- ---- --
-
--------
-------
----- -----------------------
---- ---------------------- --------- --------------------- -------
---- -----------------------
--------------- ---------
---
----- ----- ----- --- ----- ----------- ---------- ----- ---- --- ----- ----- ------ ------- ----------
----- ------- ------- ------ -- --------- ------ --------- --- --- ------ ----- ----------- ---- -----
--- ------- ------------ ------ ------- -- ------ -- ----- --------- --------- --- ---- --- ----- ----
-- ----- --- ------ -------- ------- --- -- ---- ----- ------- -------- ------------ -- -------- ----
---- ----- ------------ --- -------- --- -------- -------- --- --- ---- -- ------- -------- ------
-------- ---- --- ---- ----- ------- - ------ ----- --------
----
---
------- --------- ---- --- ------ ---------- ---- ---- --------- ------- -- --------- ------ -----
-- ------ ------- -------- ------ ---- -- ---------- --------- ------- ------ ------ ----- --------
------ ----- ---- --------- - ------ -- ---- -------- -------- ----------- -------- -------- ---
----- -- ----- --------- ---------- ---- -------- ---- ------ --- ---- ------- ----- --------- ---
----
---
------ -- ------ ----- -- ------- ------ --------- --------- ---- -- ----- ------ ---------- -------
---- ------ --- ---- ------- ------- - --- ------- ----- ------ ------- ------ -- ------- ----- ------
--- --- ------- ---- --- ----- -------- -- -------- ----- ---------- ----- ---------- ----- -- -----
--------- ----- ------ --------- ------ -- ------- ----- ---- --- ---- ---- -------- ------ -----
------ -------- --- -------- ---- -------
----
---
--- ---- ---- -- ---- --------- -------- -- ------- ---- ---- --------- --------- ---- ---- ------
------ -- ------ ---- ----- -- ------- ------ ---------- ------ --- ---- ----------- --------- ----
---- ------ --- --- ---- --------- ----- ------ -- --- ------- ---- ------ --------- - -------- ----
-------- --- --- ----- ------- ------- -------- ----- ------- -- -------- ------ --------- -------
---- ---- -------- ------ --------- -------- ------- ------- --------- ------
----
---
------- --------- ---- -- ----- ---------- -- ------- --- -------- ---- ---- ----- ------ ---
--------- ---- ------ --- ------ --- ----- ---- ------ --------- ---- ------ ------ ----- ---
-- -------- ---- ------ -- -------- ------ ----- ------- ------ --- ----- -------- ----------
----------- ------ ------- ------- ------- ----- ---- --------- -------- ------ ----------- ------
--------- -------- --------- ------ ------------ ----- -- -------- ---- ------- --- ----- --
-------- ------ ----- --------- ------ -- ---- --- ----- -------- --------
----
---
--------- --------- -------- ---- -- ------- ----------- ---- ----- ----- ----- ---------- ------
--- --------- -------- ---- ---- -------- ----- --- --------- ---- ----- --- ------- -------
------ ------- ------ ---- ---------- -------- ----- ----- ---------- -------- ---- --- -----
-------- ----- ------- -------- ---- ------- --- -------- -- ------- --- ------- ---- -----
-------- ---- ----- --- -------- ------ -------
----
------
---- -------------------------
-- --------- -------------------
----
------
----
-- --------- ---------------------
------
------
------- ------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
--------
----------------------- ---------------------------------- ---------------- -
------------- - ------------------------- -
--- ----------- - ------------------------------------
------------------------------------- ---------- -
--------------------------- ----- ---- ------------------------------
---
--
---
---------
-------
-------在本示例中，我们加载了 ng-fiscroll、Font Awesome 和 AngularJS 库，然后在 HTML 中创建了一个可滚动的 div。此外，我们还添加了一些滚动条、滚动指示器和事件处理程序以便演示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9581e8991b448e7559