@material/tab-scroller 是一个很实用的前端工具，特别适合用在多标签页的情景下。今天我们就来探讨一下怎样使用它。
什么是 @material/tab-scroller
@material/tab-scroller 是 Material Design Tab Scroller 组件的一个 NPM 包。它使用了 Material Design 的设计思路，用来实现带有滚动效果的标签页。
如何安装
使用 NPM 安装包并将其添加到项目中即可使用。
npm i @material/tab-scroller
如何使用
HTML 结构
首先，需要创建一个包含所有标签页的外层容器。标签页需要放在一个具有可滚动性的容器中。为了实现这一点，我们需要这样写 HTML 结构。
-- -------------------- ---- ------- ---- ---------------------- ---- ------------------------ ---- -------------------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- -------------- ------- ---- ----------- --------------- -------- ------ ------ ------展开代码
上面的代码中，我们创建了一个包含了所有标签页的 .tab-wrapper 容器，这个容器放在了一个具有可滚动性的 .tab-scroll-area 容器中。这两个容器都位于一个 .tab-container 容器内。
CSS 样式
接下来，需要添加一些必要的 CSS 样式，以便让标签页实现滚动效果。示例代码如下：
-- -------------------- ---- ------- -------------- - ------ ----- ------- ------ --------- ------- - ---------------- - ------ ----- ------- ----- ----------- ----- ----------- ------- --------------------------- ------ - ------------ - -------- ----- ---------- ------- ---------------- ----------- ------------ ------- ------- ----- -------- --- -- ------- - ---- - ---- - -------- ------------- -------- ---- ------------- ---- ----------------- -------- ------- --- ----- ----- ---------- ----- -展开代码
上面的代码中，样式定义了标签页容器 .tab-wrapper 宽度为所有标签页之和，从而保证容器本身不会出现滚动条。同时，.tab-scroll-area 具有水平滚动条，保证用户可以在标签页较多的情况下滚动查看。
JavaScript 代码
最后，需要使用 JavaScript 将头部标签页容器和 .tab-scroll-area 容器进行连接，从而实现滚动效果。以下是 JavaScript 代码示例：
import { MDCTabScroller } from '@material/tab-scroller'; const tabScroller = new MDCTabScroller(document.querySelector('.tab-scroll-area')); tabScroller.listen('MDCTabScroller:scrollEnd', () => { // 可以在这里添加必要的逻辑处理 });
上面的代码中，我们首先导入了 @material/tab-scroller 包，并实例化了一个 MDCTabScroller 对象。我们把 .tab-scroll-area 对象作为参数传入，从而实现了滚动效果。
tabScroller.listen 方法可以监听 MDCTabScroller:scrollEnd 事件，可以在事件触发时添加必要的逻辑处理。
总结
通过本篇文章的介绍，你已经掌握了如何使用 @material/tab-scroller 包，并实现了滚动效果。所以，如果你需要在项目中使用这个功能，就可以直接安装和使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200788
