简介
devcampjsfooterkf是一个帮助前端开发者实现底部固定菜单栏的npm包，它提供了多种菜单样式，可以轻松实现定制化的底部菜单代码。使用这个包，你可以省去编写大量底部菜单栏的繁琐代码，实现快捷、高效、可靠的开发。
安装
你可以通过npm安装该包，在命令行中输入下列命令：
npm install devcampjsfooterkf
使用
- 引入devcampjsfooterkf包
你可以直接在你的html中直接引入css和js：
<link rel="stylesheet" href="../node_modules/devcampjsfooterkf/dist/css/dcf-footer.min.css"> <script src="../node_modules/devcampjsfooterkf/dist/js/dcf-footer.min.js"></script>
也可以通过webpack等打包工具进行整合：
import 'devcampjsfooterkf/dist/css/dcf-footer.min.css'; import 'devcampjsfooterkf/dist/js/dcf-footer.min.js';
- 初始化菜单栏
在你的HTML底部添加以下代码：
<div id="dcf-footer-tabs"> <div data-dcf-tab-id="homepage" data-dcf-tab-icon="fa fa-globe" class="dcf-nav-item dcf-home active">Web</div> <div data-dcf-tab-id="blog" data-dcf-tab-icon="fa fa-edit" class="dcf-nav-item dcf-blog">Blog</div> <div data-dcf-tab-id="contact" data-dcf-tab-icon="fa fa-envelope-o" class="dcf-nav-item dcf-contact">Contact</div> <div data-dcf-tab-id="about" data-dcf-tab-icon="fa fa-info" class="dcf-nav-item dcf-info">About</div> </div>
其中，data-dcf-tab-id为选项卡名称，data-dcf-tab-icon为图标，class为选项卡class，包括dcf-nav-item为选项卡基础，及自定义class。
- 启用devcampjsfooterkf
在你的JS文件底部，添加以下代码：
DCFFooter.init({
duration: 200,
easing: 'linear',
showOnLoad: true,
showOnlyOnScroll: false
});其中，duration为显示、隐藏的过渡时间；easing为过渡函数；showOnLoad为是否在页面首次加载时显示；showOnlyOnScroll为是否只在滚动到底部时显示。
实例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------------------------------------- ------ ---------------- --------------------------------------------------------------------- ------- ------ ----- ---- --- ----- -------------- ------- ----------- ------- -- ------- ----- ----- --- ----- --------------------- ------ -------------------------- --------------------- --------- ------------------- -------- ----------------- ------ ---------------------- --------------------- -------- ------------------- -------------------- ------ ------------------------- --------------------- -------------- ------------------- -------------------------- ------ ----------------------- --------------------- -------- ------------------- --------------------- ------- ----- ------------ --- -------- --------------------------------------------------------------------------- ----- ------ --- -------- ----------------------- ------------------ ------------ ---- ---------- --------- -------------- ----- -------------------- ----- ----- ---------- ------- -------
总结
devcampjsfooterkf是一个方便快捷实现底部固定菜单栏的npm包，通过以上的教程你已经会使用它了。它可以为你的开发工作提供很大的便利性，免去了底部菜单栏的大量繁琐的代码编写，在实现底部菜单栏的时候可以大大缩减开发时间，同时也免除了菜单栏调试的烦恼。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7a238a385564ab69ac