这篇文章主要讲解了“vue+vue-fullpage怎么实现整屏滚动页面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue+vue-fullpage怎么实现整屏滚动页面”吧！
计算
安全
数据库
网络和加速
企业服务
// An highlighted block
import router from './router'
Vue.config.productionTip = false
// 整屏滚动
import 'fullpage.js/vendors/scrolloverflow';
import VueFullPage from 'vue-fullpage.js';
Vue.use(VueFullPage)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})1.html，
<template>
<div>
<full-page :options="options" id="fullpage" ref="fullpage">
<div >
<h4>vue-fullpage.js</h4>
</div>
<div >
<div >
<h4>Slide 2.1</h4>
</div>
<div >
<h4>Slide 2.2</h4>
</div>
<div >
<h4>Slide 2.3</h4>
</div>
</div>
<div >
<h4>Section 3</h4>
</div>
</full-page>
</div>
</template>2.js
export default {
data() {
return {
options: {
anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
afterLoad: this.afterLoad, // method中的方法 即回调函数
scrollOverflow: true,
scrollBar: false,
menu: "#menu",
sectionsColor: [
"#23A84A",
"#ff5f45",
"#0798ec",
"#fec401",
"#000000",
"#E7EFFE",
],
},
};
},
}1.afterLoad:对应的函数写在methods中，常用作对页面的处理
methods:{
afterLoad: function (origin, destination, direction) {
// origin 起点 destination终点 direction方向 固定写法
this.navIndex = destination.index;
//destination.index代表对应页面index(从0开始)
//拿到对应页面的index就可以进行操作
if (destination.index > 0) {
this.phoneShow = true;
}
if (destination.index === 0) {
this.phoneShow = false;
}
},
}2.moveTo通过事件跳转到对应的page页面
options: {
afterLoad: this.afterLoad,
//一定要在options中插入这段数组，数组的值对应page页面
anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
afterLoad: this.afterLoad, // method中的方法 即回调函数
scrollOverflow: true,
scrollBar: false,
menu: "#menu",
sectionsColor: [
"#23A84A",
"#ff5f45",
"#0798ec",
"#fec401",
"#000000",
"#E7EFFE",
],
},
moveTo(pages) {
//固定写法,第一个参数代表options中anchors数组中的值
//在点击时传递对应的pages值即可
fullpage_api.moveTo(pages, 1);
},感谢各位的阅读，以上就是“vue+vue-fullpage怎么实现整屏滚动页面”的内容了，经过本文的学习后，相信大家对vue+vue-fullpage怎么实现整屏滚动页面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
