1、安装vue-fullpage,最新版就可以
npm install vue-fullpage -S
2、入口文件main.js引入
import 'fullpage.js/vendors/scrolloverflow'
import VueFullPage from 'vue-fullpage.js/dist/vue-fullpage.js'
import './assets/css/fullpage.min.css'
Vue.use(VueFullPage)
fullpage.min.css在本地引入
/*!
* fullPage 3.0.5
* https://github.com/alvarotrigo/fullPage.js
*
* @license GPLv3 for open source use only
* or Fullpage Commercial License for commercial use
* http://alvarotrigo.com/fullPage/pricing/
*
* Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
*/
.fp-enabled body,
html.fp-enabled {
margin: 0;
padding: 0;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.fp-slide {
float: left
}
.fp-slide,
.fp-slidesContainer {
height: 100%;
display: block
}
.fp-slides {
z-index: 1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.fp-section.fp-table,
.fp-slide.fp-table {
display: table;
table-layout: fixed;
width: 100%
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%
}
.fp-slidesContainer {
float: left;
position: relative
}
.fp-controlArrow {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #fff transparent transparent
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff
}
.fp-scrollable {
overflow: hidden;
position: relative
}
.fp-scroller {
overflow: hidden
}
.iScrollIndicator {
border: 0 !important
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important
}
#fp-nav {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0)
}
#fp-nav.fp-right {
right: 17px
}
#fp-nav.fp-left {
left: 17px
}
.fp-slidesNav {
position: absolute;
z-index: 4;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0 !important;
right: 0;
margin: 0 auto !important
}
.fp-slidesNav.fp-bottom {
bottom: 17px
}
.fp-slidesNav.fp-top {
top: 17px
}
#fp-nav ul,
.fp-slidesNav ul {
margin: 0;
padding: 0
}
#fp-nav ul li,
.fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position: relative
}
.fp-slidesNav ul li {
display: inline-block
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
width: 10px;
height: 10px;
margin: -5px 0 0 -5px
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active+.fp-tooltip {
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
width: auto;
opacity: 1
}
#fp-nav ul li .fp-tooltip.fp-right {
right: 20px
}
#fp-nav ul li .fp-tooltip.fp-left {
left: 20px
}
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell,
.fp-auto-height.fp-section {
height: auto !important
}
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell,
.fp-responsive .fp-auto-height-responsive.fp-section {
height: auto !important
}
.fp-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
/*# sourceMappingURL=fullpage.min.css.map */
3.使用
<template>
<div>
<!-- 导航 -->
<ul id="myMenu">
<li :class="{activeColor:index==currentIndex}" @click="changePages(item,index)" v-for="(item,index) in menus" :key="item.id">
<a href="javascript:;">{{item.name}}</a>
</li>
</ul>
<full-page :options="options" ref="fullpage">
<div class="section">
<div class="box3" title="哈哈哈"><router-link to="/home">section1</router-link></div>
</div>
<div class="section">
<div class="box3">
21
</div>
</div>
<div class="section">
<div class="box3">section3</div>
</div>
<div class="section">
<div class="box3">section4</div>
</div>
</full-page>
</div>
</template>
<script>
export default {
data() {
return {
menus:[
{id:1,name:'section1'},
{id:2,name:'section2'},
{id:3,name:'section3'},
{id:4,name:'section4'}
],
currentIndex:0,
options: {
//字体是否随着窗口缩放而缩放
// resize: true,
//页面滚动速度
scrollingSpeed: 700,
//绑定菜单,设定相关属性和anchors的值对应后,菜单可以控制幻灯片滚动
menu: "#myMenu",
//定义锚链接,用户可以快速打开定位到某一页面;不需要加"#",不要和页面中任意的id和name相同
// anchors: ["page1", "page2", "page3", "page4"],
//是否锁定锚链接
// lockAnchors: true,
//滚动到最顶部后是否连续滚动到底部
//loopTop: true,
//滚动到最底部后是否连续滚动到顶部
//loopBottom: true,
//是否显示导航,设为true会显示小圆点作为导航
navigation: true,
scrollOverflow: true,
// 为每个section设置背景色
sectionsColor: [
"#41b883",
"#ff5f45",
"#0798ec",
"#fec401",
"#1bcee6",
"#ee1a59",
"#2c3e4f",
"#ba5be9",
"#b4b8ab",
],
navigationTooltips: ['page1', 'page2','page3','page4'], //导航小圆点的提示
showActiveTooltip: false, //是否显示当前页面的tooltip信息
//slidesNavigation: true, //是否显示横向幻灯片的导航,默认为false
//slidesNavPosition: 'bottom', //横向导航的位置,默认为bottom,可以设置为top或bottom
onLeave:(index,nextIndex,direction)=>{
this.currentIndex=nextIndex.index
},
afterLoad:function(anchorLink, index){
// console.log(index);
},
},
};
},
created(){
},
methods:{
// 点击导航跳转到对应页面
changePages(item,index){
this.$refs.fullpage.api.moveTo(item.id)
// 添加导航激活样式
this.currentIndex=index
},
},
mounted(){
}
};
</script>
<style scoped>
.box3 {
text-align: center;
font-size: 20px;
}
.box3:hover{
transform: rotate(180deg);
transition: all .5s;
}
li {
list-style: none;
}
.activeColor{
border-bottom: 2px solid #fff;
}
.w {
width: 1200px;
margin: 0 auto;
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
#myMenu {
height: 50px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
right: 300px;
z-index: 99;
display: flex;
align-items: center;
justify-content: end;
}
#myMenu li a {
color: #000;
}
#myMenu li {
margin-right: 20px;
padding: 12px;
}
</style>
相关配置项
options:
options: {
// 为每个section设置背景色
//sectionsColor: ["#f00","#0f0","#00f"],
//用来控制slide幻灯片的箭头,设置为false,两侧的箭头会消失
//controlArrows: false,
//每一页幻灯片的内容是否垂直居中
//verticalCentered: false,
//字体是否随着窗口缩放而缩放
//resize: true,
//页面滚动速度
//scrollingSpeed: 700,
//定义锚链接,用户可以快速打开定位到某一页面;不需要加"#",不要和页面中任意的id和name相同
//anchors: ["page1","page2","page3"],
//是否锁定锚链接
//lockAnchors: true,
//定义section页面的滚动方式,需要引入jquery.easings插件
//easing:,
//是否使用css3 transform来实现滚动效果
//css3: false,
//滚动到最顶部后是否连续滚动到底部
//loopTop: true,
//滚动到最底部后是否连续滚动到顶部
//loopBottom: true,
//横向slide幻灯片是否循环滚动
//loopHorizontal: false,
//是否循环滚动,不会出现跳动,效果很平滑
//continuousVertical: true,
//是否使用插件滚动方式,设为false后,会出现浏览器自带的滚动条,将不会按页滚动
//autoScrolling: false,
//是否包含滚动条,设为true,则浏览器自带的滚动条会出现,页面还是按页滚动,但是浏览器滚动条默认行为也有效
//scrollBar: true,
//设置每个section顶部的padding,当我们要设置一个固定在顶部的菜单、导航、元素等时使用
//paddingTop: "100px",
//设置每个section底部的padding,当我们要设置一个固定在底部的菜单、导航、元素等时使用
//paddingBottom: "100px",
//固定的元素,为jquery选择器;可用于顶部导航等
//fixedElements: ".nav",
//是否可以使用键盘方向键导航
//keyboardScrolling: false,
//在移动设置中页面敏感性,最大为100,越大越难滑动
//touchSensitivity: 5,
//设为false,则通过锚链接定位到某个页面不再有动画效果
//animateAnchor: false,
//是否记录历史,可以通过浏览器的前进后退来导航
//recordHistory: true,
//绑定菜单,设定相关属性和anchors的值对应后,菜单可以控制幻灯片滚动
//menu: '.nav',
//是否显示导航,设为true会显示小圆点作为导航
//navigation: true,
//导航小圆点的位置,可以设置为left或者right
//navigationPosition: right,
//鼠标移动到小圆点上时显示出的提示信息
//navigationTooltips: ["第一页","第二页","第三页"],
//是否显示当前页面小圆点导航的提示信息,不需要鼠标移上
//showActiveTooltip: true,
//是否显示横向幻灯片的导航
//slidesNavigation: true,
//横向幻灯片导航的位置,可以为top或者bottom
//slidesNavPosition: bottom,
//内容超过满屏时是否显示滚动条,需要jquery.slimscroll插件
//scrollOverflow: true,
//section选择器
//sectionSelector: ".section",
//slide选择器
//slideSelector: ".slide"
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
afterLoad: this.afterLoad,
scrollOverflow: true,
navigation: true, //是否显示导航,默认为false
navigationPosition: 'right', //导航小圆点的位置
scrollBar: false,
keyboardScrolling: false, //是否可以使用键盘方向键导航,默认为true
continuousVertical: true, /// 是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容和,不要同时设置
menu: '#menu',
// navigation: true,
// anchors: ['page1', 'page2', 'page3'],
sectionsColor: [
'#41b883',
'#ff5f45',
'#0798ec',
'#fec401',
'#1bcee6',
'#ee1a59',
'#2c3e4f',
'#ba5be9',
'#b4b8ab'
]
}
};
vue 调用fullpage方法
this.$refs.fullpage.api.moveSectionDown();
this.$refs.fullpage.init();
// 向上滚动一页
// moveSectionUp();
//向下滚动一页
// moveSectionDown();
//滚动到第几页,第几个幻灯片;页面从1计算,幻灯片从0计算
// moveTo(wection,slide);
//和moveTo一样,但是没有动画效果
// silentMoveTo(section,slide);
//幻灯片向右滚动
// moveSlideRight();
//幻灯片向左滚动
// moveSlideLeft();
//动态设置autoScrolling配置项
// setAutoScrolling(boolean);
//动态设置lockAnchors配置项
// setLockAnchors(boolean);
//动态设置recordHistory配置项
// setRecordHistory(boolean);
//动态设置scrollingSpeed配置项
// setScrollingSpeed(milliseconds);
//添加或删除鼠标/滑动控制,第一个参数为启用、禁用;第二个参数为方向,取值包含all、up、dowm、left、right,可以使用多个,逗号分隔
// setAllowScrolling(boolean,[directions]);
//销毁fullpage特效,不写type,fullpage给页面添加的样式和html元素还在;如果使用all,则样式和html等全部被销毁
// destroy(type);
//重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果
// reBuild();