VUE3 使用 fullpage.js [vue-fullpage.js]

最新推荐文章于 2024-03-24 09:46:43 发布

Striver_598

最新推荐文章于 2024-03-24 09:46:43 发布

阅读量989

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_53574149/article/details/134164534

版权

下载

npm i vue-fullpage.js

main.js 文件配置

import 'fullpage.js';
import VueFullpage from 'vue-fullpage.js'

createApp(App)
.use(VueFullpage)
.mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 全屏滚动 vue-fullpage.js
import 'fullpage.js';
import VueFullpage from 'vue-fullpage.js'

createApp(App)
    .use(router)
    .use(ElementPlus, {locale: zhCn})
    .use(VueFullpage)
    .mount('#app')

index.html 根目录配置

<link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title></title>
    <!-- 小程序调用 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <!--全屏滚动插件-vue-fullpage.js的样式-->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

页面使用 fullpage.js组件

<template>
    <div>
        <full-page :options="options" ref="fullpageRef">
            <div class="section">
                <div style="text-align: center">
                    1⃣
                    <button @click="moveToFn">moveToFn</button>
                    <button @click="last">最后一页</button>
                </div>
            </div>
            <div class="section">
                <div style="text-align: center">
                    2⃣️
                    <button @click="next">下一页</button>
                    <button @click="upFn">上一页</button>
                </div>
            </div>
            <div class="section">
                <div class="slide">
                    <div style="height: 100vh">1 
                        <button @click="rightFn">右</button>
                        3⃣️
                    </div>
                </div>
                <div class="slide">
                    <div style="height: 100vh"> 
                        <div style="text-align: center">
                            <button @click="leftFn">左</button>
                            <button @click="rightFn">右</button>
                        3⃣️
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div style="height: 100vh">2 
                        <button @click="leftFn">左</button>
                        3⃣️
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="box3">
                    <div style="height: 100vh"> 4⃣️</div>
                </div>
            </div>
        </full-page>
        <div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, defineProps, toRefs, watch } from "vue";
const fullpageRef = ref();
const options = reactive({
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    //是否显示导航，默认为false
    navigation: true,
    //为每个section设置背景色
    sectionsColor: [
        "#42A5F5", "#26C6DA", "#66BB6A",
        "#CDDC39", "#FFEB3B", "#FF9800",
        "#FF5722", "#795548", "#EA80FC"
    ],
})
const upFn = () => { // 向上滚动一页
    fullpageRef?.value?.api.moveSectionUp();
}
const leftFn = () => { // 向左滚动一页
    fullpageRef?.value?.api.moveSlideLeft();
}
const rightFn = () => { // 向右滚动一页
    fullpageRef?.value?.api.moveSlideRight();
}
const next = () => { // 向下滚动一页
    fullpageRef?.value?.api.moveSectionDown();
}
const last = () => { // 向下滚动一页
    console.log(fullpageRef?.value?.api);
    fullpageRef?.value?.api.moveSectionUp();
}
const moveToFn = () => { // 向 第几页 滚动
    // fullpageRef?.value?.api.moveTo(3,0);
    fullpageRef?.value?.api.moveTo(3,2); // 滚动向 竖第三 横第二 页 
    // fullpage_api.moveTo('firstSlide', 2);
    // fullpage_api.moveTo(3, 0);
    // fullpage_api.moveTo(3);
}
</script>
<style lang="less" scoped>
.fp-watermark{
    display: none!important;
}
</style>