mui-scrollable-tabs 是一个非常优秀的 npm 包，它提供了一种非常简单和易用的方法让你在你的网站或者应用中使用具有滚动功能的标签页。它支持很多自定义选项，并且可以在任何设备上使用，包括桌面、移动设备等等。
安装和引入
你可以通过 npm 来来安装 mui-scrollable-tabs：
npm install mui-scrollable-tabs --save
接着，你可以通过 ES6 的方式来引入 mui-scrollable-tabs：
import scrollableTabs from 'mui-scrollable-tabs';
或者，你也可以使用传统的方式（script 标签）来引入它：
<script src="path/to/scrollableTabs.min.js"></script>
创建和使用
创建和使用一个基本的滚动标签页非常简单。你只需要在页面中添加一个容器元素（比如 div）以及一些标签页元素即可。
<div id="myTabs"> <div>Tab 1</div> <div>Tab 2</div> <div>Tab 3</div> <div>Tab 4</div> <div>Tab 5</div> <div>Tab 6</div> </div>
接下来，在您的脚本文件中，使用以下代码初始化 mui-scrollable-tabs：
const myTabs = scrollableTabs.init('#myTabs');这将会创建一个带有滚动功能的标签页。你可以通过一些选项来自定义这个标签页。
自定义
mui-scrollable-tabs 支持很多选项，包括样式、事件、动画等等。
样式
你可以自定义标签页的样式。标签页默认的样式可以通过以下代码进行修改：
.scrollable-tabs {
// 自定义样式
}你可以修改各种 CSS 属性来改变样式。
事件
mui-scrollable-tabs 支持多种不同的事件。这些事件可以用来处理选项卡的事件，比如点击、滚动等等。以下是一些可以使用的事件：
myTabs.on('change', (index, element) => {
// 当选项卡改变时触发。
});myTabs.on('scroll', () => {
// 当选项卡滚动时触发。
});myTabs.on('init', () => {
// 当选项卡初始化时触发。
});动画
mui-scrollable-tabs 支持多种不同的动画。以下是一些可以使用的动画：
myTabs.setOption('transition', 'slide');myTabs.setOption('duration', 500);以上代码将设置滚动标签页的动画效果和持续时间。你可以通过修改选项来实现更多效果。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ---- ------------
------- ---------------------------------------------
-------
---------------- -
----------- --------
-
--------------------------- -
-------- -----
-
--------
-------
------
---- ----------- ------------------------
---- -----------------------------------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
------
------
--------
----- ------ - ------------------------------ -
----------- --------
--------- ---
---
------------------- ------- -------- -- -
---------------- ------- -- ----- -- ------ - ---- ------- -- ---------
---
---------
-------
-------总结
mui-scrollable-tabs 是一个简单而强大的工具，可以轻松地在你的网站或应用中添加带滚动功能的标签页。它具有很多自定义选项和事件，使其易于使用和扩展。我希望这篇文章对你有所帮助，祝你编写出更加优秀的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589e81e8991b448d5e80