一個騷氣的文章目錄自動生成器了解一下

Cympros 發布于2019-08-23 10:53 / 2261人閱讀

摘要：左邊的邊欄線則是使用的來畫出來的，根據層級相應做一些調整，輔以的的效果就可以呈現出不錯的移動效果。

這個插件根據選定的目錄內容中的 h1, h2, h3, h4, h5, h6 標簽來自動生成目錄插入到選定的目錄容器中，并且提供一個漂亮的樣式效果

監聽內容區滾動

點擊跳轉功能

兼容性：IE10+ (由于使用了 node.classList)

地址戳這里 github地址，歡迎star，issue，pr ~

1. 預覽

炫酷模式：

普通模式：

可以通過線上DEMO 來預覽一下炫酷模式的效果

2. 實現思路

滾動的監聽通過 getBoundingClientRect 獲取元素大小以及相對視口的位置，判斷我們的監聽對象 h1~h6 標簽是否在視口中，如果在則添加 linkActiveClass 類。

傳統的錨點定位跳轉會與hash模式的單頁面應用的路由沖突，會導航到錯誤的路由路徑，這里采用把要跳轉的id放到 dataset 中，跳轉的時候取出來使用 scrollIntoView 來進行平滑滾動到目標位置。

左邊的邊欄線則是使用 svg 的path來畫出來的，根據層級相應做一些調整，輔以css的 transition 的效果就可以呈現出不錯的移動效果。

3. Api

如果要使用默認的樣式，請手動引入

import "progress-catalog/src/progress-catalog.css"

使用方法：

// 引入
import Catalog from "ProgressCatalog"

// 使用 
new Catalog({
    contentEl: "loading-animation",
    catalogEl: `catalog-content-wrapper`,
    selector: ["h2", "h3"]
})

構造函數接受的參數：

contentEl [String]

需要檢索生成目錄的內容區的id選擇器，不需要加#

catalogEl [String]

將生成的目錄append進的目錄容器的id選擇器，不需要加#

scrollWrapper [可選, String]

監聽scroll事件的內容區容器的id選擇器，不需要加#，如果不填則默認是 contentEl 的父元素

linkClass [可選, String]

所有目錄項都有的類，默認值：cl-link

注意，如果設置了此值，則需要重寫默認樣式

linkActiveClass [可選, String]

激活的目錄項所有的類，默認值：cl-link-active

注意，如果設置了此值，則需要重寫默認樣式

selector [可選, Array]

選擇目錄的標題標簽，默認值：["h1", "h2", "h3", "h4", "h5", "h6"]

如果只希望生成目標內容區的 h2, h3 標簽的目錄，那么可以設置 selector: ["h2", "h3"]

activeHook [可選, Function]

當激活新的目錄項標簽的時候的回調函數

topMargin [可選, Number]

第一個目錄標簽在被認為可見之前需要向下移動的距離，默認值：0

bottomMargin [可選, Number]

同上，向下移動的距離，默認值：0

cool [可選, Boolean]

炫酷模式開關，默認值：true

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：

阮一峰 - SVG 圖像入門教程

Codepen - Progress Nav

MDN - scrollIntoView

MDN - HTMLElement.dataset

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

云服務器 GPU云服務器自動生成文章自動創建目錄 php生成目錄樹 java的目錄生成

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96788.html

PHP-RabbitMQ學習日記（一）

摘要：通道，建立一個訪問通道。隊列，每個消息都會被投入到一個或多個隊列。路由，根據這個關鍵字進行消息投遞。消息消費者，就是接受消息的程序。給自己做一個記錄本文主要介紹有一下 1.RabbitMQ是概念 2.RabbitMQ在windows上安裝，啟動，關閉 3.RabbitMQ其他小介紹下面一步一步走起來 1.RabbitMQ是概念 RabbitMQ是一個建立在AMQP（高級消息隊列協...

SolomonXie 2019-06-28 14:23 評論0 收藏0
當大多數人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來

寫在前面當大多數人Vue理解的爐火純青的時候，你應該思考怎么讓vue頁面騷氣起來，下面就我個人在接觸Vue兩年的時間里，在實際工作中門戶網站在前端頁面交互應用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎、數據基本上是mock，功能和場...

lingdududu 2019-08-26 12:12 評論0 收藏0