nuxt使用fullpage.js详细解决方案

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中找到如下代码，删除或注释掉即可。

❤❤❤❤❤如果帮您解决了当前的困难，麻烦点个小心心❤❤❤❤❤