1. 安装
npm install --save vue-fullpage.js
2. 配置
main.js中
// 全屏滚动 vue-fullpage.js import 'fullpage.js/vendors/scrolloverflow'; import VueFullpage from 'vue-fullpage.js' Vue.use(VueFullpage)
public/index.html 中的 <head></head>标签内
<!--全屏滚动插件-vue-fullpage.js的样式--> <link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">
3. 使用
.vue文件中，每个 <div class="section"></div> 为一页，其中的 <div class="slide"> </div>为横向子页
<template> <div> <full-page :options="options" ref="fullpage"> <div class="section"> <h3>vue-fullpage.js</h3> </div> <div class="section"> <div class="slide"> <h3>Slide 2.1</h3> </div> <div class="slide"> <h3>Slide 2.2</h3> </div> <div class="slide"> <h3>Slide 2.3</h3> </div> </div> <div class="section"> <h3>Section 3</h3> </div> </full-page> </div> </template>
options 配置
<script> export default { data() { return { options: { licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", //是否显示导航，默认为false navigation: true, //为每个section设置背景色 sectionsColor: [ "#41b883", "#ff5f45", "#0798ec", "#fec401", "#1bcee6", "#ee1a59", "#2c3e4f", "#ba5be9", "#b4b8ab" ], } } } } </script>
其他options 配置
//导航小圆点的位置，left或者right,默认为right navigationPosition: 'left', //是否可以使用键盘方向键导航（上下键翻页），默认为true keyboardScrolling: true, //是否显示两侧的箭头 controlArrows: false, //每一页幻灯片的内容是否垂直居中，默认为true verticalCentered: true, //字体是否随着窗口缩放而缩放 默认为true 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", //在移动设置中页面敏感性，最大为100，越大越难滑动 touchSensitivity: 5, //设为false，则通过锚链接定位到某个页面不再有动画效果 animateAnchor: false, //是否记录历史，可以通过浏览器的前进后退来导航 recordHistory: true, //绑定菜单，设定相关属性和anchors的值对应后，菜单可以控制幻灯片滚动 menu: '.nav', // 鼠标移动到小圆点上时显示出的提示信息 navigationTooltips: ["第一页","第二页","第三页"], // 是否显示当前页面小圆点导航的提示信息，不需要鼠标移上 showActiveTooltip: true, // 是否显示横向幻灯片的导航 slidesNavigation: true, // 横向幻灯片导航的位置，可以为top或者bottom slidesNavPosition: '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();
完整范例代码
<template> <div> <full-page :options="options" ref="fullpage"> <div class="section"> <div style="text-align: center"> <h1 style="color: white">小米手机拍照效果</h1> <button @click="next">下一页</button> </div> </div> <div class="section"> <div class="slide"> <div style="height: 100vh"> <img width="100%" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section14-8.jpg" alt=""> </div> </div> <div class="slide"> <div style="height: 100vh"> <img width="100%" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section14-6.jpg" alt=""> </div> </div> <div class="slide"> <div style="height: 100vh"> <img width="100%" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section16-2.jpg" alt=""> </div> </div> </div> <div class="section"> <div class="box3"> <div style="height: 100vh"> <img height="100%" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section11-1.jpg" alt=""> </div> </div> </div> </full-page> <div> </div> </div> </template> <script> export default { data() { return { options: { licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", //是否显示导航，默认为false navigation: true, //为每个section设置背景色 sectionsColor: [ "#41b883", "#ff5f45", "#0798ec", "#fec401", "#1bcee6", "#ee1a59", "#2c3e4f", "#ba5be9", "#b4b8ab" ], } } }, methods: { next() { // 向下滚动一页 this.$refs.fullpage.api.moveSectionDown(); } } } </script>
