npm 包 ionic2-fixedscroll-directive 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

ionic2-fixedscroll-directive 是一个基于 ionic2 框架的 npm 包，提供了一个自定义指令 fixedScroll，可以使一个 ion-content 元素在滚动到一定位置后停止滚动并保持固定位置。

安装

首先确保已安装 Ionic 2 和 Angular：

npm install -g ionic@latest
npm install --save @angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router}@latest rxjs@latest

然后安装 ionic2-fixedscroll-directive：

npm install --save ionic2-fixedscroll-directive

使用方法

在 app.module.ts 中引入自定义指令：

-- -------------------- ---- -------
------ - -------------------- - ---- -------------------------------

-----------
  ------------- -
    ------
    -- -------
    --------------------
  --
  -------- -
    --------------------------
  --
  ---------- -----------
  ---------------- -
    -----
  --
  ---------- ---------- ------------- --------- -------------------
--
------ ----- --------- --

在需要使用的页面的 .ts 文件中引入 ElementRef 和 ViewChild：
```
import { Component, ElementRef, ViewChild } from '@angular/core';
```
在需要使用的页面的 .ts 文件中在 @ViewChild 中声明自定义指令：
```
@ViewChild(FixedScrollDirective) fixedScroll: FixedScrollDirective;
```
在需要使用的页面的 .html 文件中应用自定义指令：
```
<ion-content fixedScroll></ion-content>
```

参数说明

自定义指令 fixedScroll 可以传入两个参数：

fixedpoint：滚动到该元素时，ion-content 停止滚动并保持固定位置；
offset：固定位置与顶部的偏移量。

示例代码

-- -------------------- ---- -------
------------
  ------------
    --------------------------------------- ----------------
  -------------
-------------

------------ ----------- ------------------------- ------------------
  ----------
    --------- ----------- ---- -- -------
      -- ---- --
    -----------
  -----------
  ---- ------------------------------------
--------------

-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------ - ------------- - ---- ----------------
------ - -------------------- - ---- -------------------------------

------------
  --------- ------------
  ------------ -----------
--
------ ----- -------- -
  -------------------------------- ------------ ---------------------
  ------------------------ ----------- -----------
  ------ ---------
  ------- -------

  ------------------ -------- -------------- -
    ---------- - ---------------------------
    ----------- - --
  -

  ---------------- -
    -- -----
    -- ---------------- -- ------------------------------ -
      ----- ---- - ------------------------------------------------------
      ----------- - ---------
    -
  -

-

学习与扩展

源码地址：https://github.com/mastertwj/ionic2-fixedscroll-directive
欢迎提交 Issues 或 Pull Requests。
了解更多 Ionic 2 自定义指令的知识：https://angular.io/guide/attribute-directives

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562fa81e8991b448e0c88