公司需要做个官网，开工前大概有三个选择：
1.使用html+css+js纯原生
2.使用webpack模块化
3.使用vue框架
现在vue在国内可谓是大流行，那就直接选择vue吧。还有个需求是首页有多个页面可整屏滚动翻页。
网上搜索到有swiper和fullpage可以实现整屏滚动翻页的效果。发现swiper对vue的支持很差，使用起来各种问题，最后选择了fullpage。
fullpage的引用参照相关链接
//1.安装
npm i vue-fullpage.js
//2.man.js中导入
import VueFullpage from 'vue-fullpage.js'
Vue.use(VueFullpage)
//3.简单使用
<full-page :options="options" ref="fullpage">
// 第一页
<div class="section">
</div>
// 第二页
<div class="section">
</div>
// 第三页
<div class="section">
</div>
// 页脚
<div class="section contact_footer">
</div>
</full-page>
// js部分放在data中
options: {
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
afterLoad: this.afterLoad,
scrollOverflow: true,
scrollBar: false,
menu: "#menu",
sectionsColor: [],
},
最后的页脚不满一屏，网上搜索得到最多的结果是：
1.把页脚放在最后一页的最下面，并撑出屏幕，滑动到最一页的时候改变当前fullpage的页面显示方式，参照相关链接
2.把页脚单独放一屏幕，然后修改css样式，并且修改源码相关链接
3.把页脚放在最后一页的最下面，并撑出屏幕，设置最后一页的高度自动关键字class样式，fp-auto-height。相关链接
4.把页脚单独放一屏幕，然后修改css样式，直接给一个固定高度，结合上面的代码，我是这样实现的。相关链接
.contact_footer {
height: 44vh !important;
}
第1种，滑到最后一页面改了页面显示样式多出了滚动条，效果不好。
第2种，由于使用了vue改源码不方便。
第3种，没有效果，也可能是我没有引用fullage的css导致的。
最终搜索到第4种解决办法。
网上的解决办法很多，从昨天晚折腾到今天凌晨1点才搞定。
网友评论