vue全屏滚动——vue-fullpage.js教程

网友投稿 343 2022-09-22

options 配置

其他options 配置

//导航小圆点的位置，left或者right,默认为rightnavigationPosition: 'left',//是否可以使用键盘方向键导航（上下键翻页），默认为truekeyboardScrolling: true,//是否显示两侧的箭头controlArrows: false,//每一页幻灯片的内容是否垂直居中，默认为trueverticalCentered: true,//字体是否随着窗口缩放而缩放 默认为trueresize: 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",//在移动设置中页面敏感性，最大为100，越大越难滑动touchSensitivity: 5,//设为false，则通过锚链接定位到某个页面不再有动画效果animateAnchor: false,//是否记录历史，可以通过浏览器的前进后退来导航recordHistory: true,//绑定菜单，设定相关属性和anchors的值对应后，菜单可以控制幻灯片滚动menu: '.nav',// 鼠标移动到小圆点上时显示出的提示信息navigationTooltips: ["第一页","第二页","第三页"],// 是否显示当前页面小圆点导航的提示信息，不需要鼠标移上showActiveTooltip: true,// 是否显示横向幻灯片的导航slidesNavigation: true,// 横向幻灯片导航的位置，可以为top或者bottomslidesNavPosition: 'bottom',// 内容超过满屏时是否显示滚动条，需要jquery.slimscroll插件scrollOverflow: true,// section选择器sectionSelector: ".section",// slide选择器slideSelector: ".slide"

4. 调用 API

// 向下滚动一页this.$refs.fullpage.api.moveSectionDown();

其他 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();

完整范例代码