关于Vue中，fullpage全屏滚动插件的使用方法
作者：互联网
一、 安装插件
npm install --save fullpage.js
二、 全局导入，在main.js中
import 'fullpage.js/vendors/scrolloverflow' import VueFullPage from 'vue-fullpage.js/dist/vue-fullpage.js' Vue.use(VueFullPage)
三、 在页面中使用
fullpage(:options="options", ref="fullpage")
.sections
// 第一页
.section
// 第二页
.section
// 第三页
.section
其中options为fullpage的配置项，在data中声明
options: {
licenseKey: null,
afterLoad: this.afterLoad,
controlArrows: true
}
其中afterLoad为滚动某一页后的回调函数，可在其中定义一些操作
afterLoad (anchors, item) {
}
常用配置项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'
]
}
}
还可以通过this.$refs.fullpage.api 来调用插件的api
this.$refs.fullpage.init() this.$refs.fullpage.api.setAllowScrolling(false)
常用api如下：
// 向上滚动一页 // 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();
参考文章：https://www.cnblogs.com/mybilibili/p/12263820.html
标签：插件,Vue,滚动,fullpage,false,true,section,页面 来源： https://www.cnblogs.com/jane2160/p/12718417.html