nuxt框架ssr渲染使用fullpage.js实现滚屏的效果。
直接上代码
<!--
* @Descripttion:
* @Date: 2022-11-09 14:57:43
-->
<template>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 基本演示</p>
</div>
<div class="section">
<div class="slide">
<h3>第二屏的第一屏</h3>
</div>
<div class="slide">
<h3>第二屏的第二屏</h3>
</div>
<div class="slide">
<h3>第二屏的第三屏</h3>
</div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后一屏</p>
</div>
</div>
</template>
<script>
export default {
name: "IndexPage",
head() {
return {
script: [
// 第一种引入网络资源
// {
// src: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js",
// },
// {
// src: "https://cdn.bootcdn.net/ajax/libs/fullPage.js/4.0.12/fullpage.js",
// },
// 第二种引入本地资源,如果不要ssr渲染,则把ssr设置false
{
src: "/jquery.min.js",
//ssr: false,
},
{
src: "/fullpage.js",
//ssr: false,
},
],
link: [
{
rel: "stylesheet",
href: "https://cdn.bootcdn.net/ajax/libs/fullPage.js/4.0.12/fullpage.min.css",
},
],
};
},
mounted() {
$("#dowebok").fullpage({
sectionsColor: ["#1bbc9b", "#4BBFC3", "#7BAABE", "#f90"],
});
},
};
</script>
<style scoped>
.section {
height: 100vh;
text-align: center;
}
</style>
两种引入方式。一种网络资源,一种本地资源。
网络资源会遇到控制台报错。解决办法在下方。
所以最好使用本地资源。
注意:
1、引入本地资源的时候要注意顺序。先引入jquery。再引入fullpage.js。否则会报错。
$(...).fullpage is not function
2、引用时,不需要添加/static目录,因为/static目录编译后会被映射到/目录。html页面内容直接放入template中。
如果添加了/static目录,则会报错找不到该资源
{
src: "/jquery.min.js",
ssr: false,
},
{
src: "/fullpage.js",
ssr: false,
},
3、解决
在本地资源fullpage.js中找到如下代码,删除或注释掉即可。
❤❤❤❤❤如果帮您解决了当前的困难,麻烦点个小心心❤❤❤❤❤