从问题说起,项目终于到的实际问题:
1、angular单页应用运用了2个jQuery.fullpage全屏滚动,运用路由单页有冲突,分页器中id固定fp-nav,分页器重复添加
2、jQuery.fullpage自定义footer的高度,每个滚动页面被固定高度很烦,滚动较小的高度,任然全屏滚出
解决问题1:
针对第一个问题,会出现重复初始化fullpage问题,由于使用的angular单页应用,所以jQuery不可避免,于是选择更好与angular搭配的angular-fullpage运用插件解决,很不错(下篇详解angular-fullpage用法)
解决问题2:
毫无疑问查文档是最好解决插件问题的方式,其他真的浪费时间。
gitHub详细文档(fullpage.js)
其中有详细的说明【Creating smaller or bigger sections】并附有demo
看着 demo 写了个例子,不过忘加 jquery.fullpage.min.css导致出现错误
详细例子如下(引入文件自己找对位置)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src='libs/jquery/jquery-1.11.3.min.js'></script> <script type="text/javascript" src='libs/jquery/jquery.fullPage.min.js'></script> <link rel="stylesheet" type="text/css" href="libs/jquery/jquery.fullpage.min.css"> </head> <body> <div id="fullpage"> <div class="section">One</div> <div class="section">Two</div> <div class="section"> three </div> <div class="section fp-auto-height"> <div class="content">Four</div> </div> <style type="text/css"> .section { text-align:center; font-size: 3em; } </style> <script type="text/javascript"> $('#fullpage').fullpage({ anchors: ['page1', 'page2', 'page3', 'page4'], sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], }); </script> </div> </body> </html>