fullPage.js全屏垂直滚动插件,在Nuxt3框架中的应用
最近的一个项目(官网开发)需要用到Nuxt3框架,进行服务端渲染,这样可以有更好的SEO。正式开始Nuxt3的项目后发现这个框架非常多的坑。
我们的官网首页需要做垂直滚动效果,参考类似效果的网站是用了fullPage.js插件,一开始将它安装到Nuxt不太顺利,各种报错,Nuxt报500等等,上百度、必应、谷歌搜了又搜,fullPage与Nuxt框架的文章总共就那么几篇,都是比较老的文章,还好隐隐约约也找到些关键线索。
插件的适配程度跟Nuxt版本存在关联,如果你使用的是最新的Nuxt3,可能网上的Nuxt2老教程就不适用。
写这篇博客我的环境是:Node v18.15.0、Nuxt v3.9、pnpm v8.14.3
安装适合Nuxt3版本的fullPage.js插件:
pnpm i @fullpage/nuxt-fullpage
HTML和JS代码如下:
<full-page :options="options" id="fullpage" ref="fullpage">
<section class="section">
<img src=''>
</section>
<section class="section">
<img src=''>
</section>
<section class="section">
<img src=''>
</section>
</full-page>
let options = {
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE"
// 这里填fullpage.js的配置项,默认已经开启了垂直滚动效果
}
找到nuxt.config.ts文件,里面添加:
export default defineNuxtConfig({
modules: [
...
'@fullpage/nuxt-fullpage'
]
})
记得给垂直滚动效果的元素添加100vh高度,这样每翻一页刚好是一张背景图。
然后重启Nuxt,效果实现!如果按照上面步骤出现报错,或效果没有出现,请检查环境,以及重启Nuxt框架。