vue中使用fullpage

作者: 小太阳可可 | 来源:发表于2020-12-30 14:47 被阅读0次

基于vue项目实现整屏滚动 -- vue-fullpage 插
vue-fullpage.js 运行报错
vue中使用fullpage
vue-fullpage-ssr
过度动画
fullpage插件的使用0802
第十一周第五天笔记之fullpage全屏页面滚动插件
FullPageAPI
FullPage基本使用
fullPage.js控制台licenseKey报错

安装：

npm install --save vue-fullpage.js

引入：

// 引用fullpage 插件
import Vue from 'vue'
import 'fullpage.js/vendors/scrolloverflow' // Optional. When using scrollOverflow:true
import './fullpage.scrollHorizontally.min' // Optional. When using fullpage extensions
import VueFullPage from 'vue-fullpage.js'
Vue.use(VueFullPage);

fullpage 配置

options: {
  sectionsColor: ["#f00","#0f0","#00f"],  // 为每个section设置背景色
  controlArrows: false,                   //用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消verticalCentered: false,   //每一页幻灯片的内容是否垂直居中 
  resize: true,                           //字体是否随着窗口缩放而缩放
  scrollingSpeed: 700,                    //页面滚动速度
  anchors: ["page1","page2","page3"],     //定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同
  lockAnchors: true,                      //是否锁定锚链接
  easing:,                                //定义section页面的滚动方式，需要引入jquery.easings插件
  css3: false,                            //是否使用css3 transform来实现滚动效果
  loopTop: true,                          //滚动到最顶部后是否连续滚动到底部
  loopBottom: true,                       //滚动到最底部后是否连续滚动到顶部
  loopHorizontal: false,                  //横向slide幻灯片是否循环滚动
  continuousVertical: true,               //是否循环滚动，不会出现跳动，效果很平滑
  autoScrolling: false,                   //是否使用插件滚动方式，设为false后，会出现浏览器自带的滚动条，将不会按页滚动
  scrollBar: true,                        //是否包含滚动条，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动，但是浏览器滚动条默认行为也有效
  paddingTop: "100px",                    //设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用
  paddingBottom: "100px",                 //设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用
  fixedElements: ".nav",                  //固定的元素，为jquery选择器；可用于顶部导航等
  keyboardScrolling: false,               //是否可以使用键盘方向键导航
  touchSensitivity: 5,                    //在移动设置中页面敏感性，最大为100，越大越难滑动
  animateAnchor: false,                   //设为false，则通过锚链接定位到某个页面不再有动画效果
  recordHistory: true,                    //是否记录历史，可以通过浏览器的前进后退来导航
  menu: '.nav',                           //绑定菜单，设定相关属性和anchors的值对应后，菜单可以控制幻灯片滚动
  navigation: true,                       //是否显示导航，设为true会显示小圆点作为导航
  navigationPosition: right,              //导航小圆点的位置，可以设置为left或者right
  navigationTooltips: ["第一页","第二页","第三页"],//鼠标移动到小圆点上时显示出的提示信息
  showActiveTooltip: true,                //是否显示当前页面小圆点导航的提示信息，不需要鼠标移上
  slidesNavigation: true,                 //是否显示横向幻灯片的导航
  slidesNavPosition: bottom,              //横向幻灯片导航的位置，可以为top或者bottom
  scrollOverflow: true,                   //内容超过满屏时是否显示滚动条，需要jquery.slimscroll插件
  sectionSelector: ".section",            //section选择器
  slideSelector: ".slide",                //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 调用 fullpapge 的方法

this.$refs.fullpage.api.moveSectionDown();
this.$refs.fullpage.init();

moveSectionUp();             //向上滚动一页
moveSectionDown();           //向下滚动一页
moveTo(wection,slide);       //滚动到第几页，第几个幻灯片；页面从1计算，幻灯片从0计算
silentMoveTo(section,slide); //和moveTo一样，但是没有动画效果
moveSlideRight();            //幻灯片向右滚动
moveSlideLeft();             //幻灯片向左滚动
setAutoScrolling(boolean);   //动态设置autoScrolling配置项
setLockAnchors(boolean);     //动态设置lockAnchors配置项
setRecordHistory(boolean);   //动态设置recordHistory配置项
setScrollingSpeed(milliseconds);//动态设置scrollingSpeed配置项
setAllowScrolling(boolean,[directions]);//添加或删除鼠标/滑动控制，第一个参数为启用、禁用；第二个参数为方向，取值包含all、up、dowm、left、right，可以使用多个，逗号分隔
destroy(type);               //销毁fullpage特效，不写type，fullpage给页面添加的样式和html元素还在；如果使用all，则样式和html等全部被销毁
reBuild();                   //重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效

完整代码

<template>
  <div>
    <full-page :options="options" id="fullpage" 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>

<script>
import { VueExtend } from 'godspen-lib';

export default {
  mixins: [VueExtend.mixin],
  name: 'VueFullPage',
  label: process.env.LABEL,
  style: process.env.STYLE,
  data() {
    return {
      options: {
        licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
        afterLoad: this.afterLoad,
        navigation: true,
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: [
          '#41b883',
          '#ff5f45',
          '#0798ec',
          '#fec401',
          '#1bcee6',
          '#ee1a59',
          '#2c3e4f',
          '#ba5be9',
          '#b4b8ab'
        ]
      }
    };
  },
  methods: {
    afterLoad: function(origin, destination, direction) {
      console.log('After load....');
      console.log(destination);
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

table {
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}

strong {
  font-weight: bold;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

q:before, q:after {
  content: '';
}

abbr, acronym {
  border: 0;
}

* {
  -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
  -moz-box-sizing: border-box; /* <=28 */
  box-sizing: border-box;
}

/* Custom
 * --------------------------------------- */
body {
  font-family: arial, helvetica;
}

.section {
  position: relative;
  text-align: center;
}

#section-1 h2 {
  color: #fff;
  font-size: 10em;
  font-weight: 900;
}

#section-1 h1 {
  font-size: 2em;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  margin: 1.5em auto 1em auto;
  color: #35495e;
  padding-right: 30px;
  padding-left: 30px;
}

#section-1 li {
  display: inline-block;
  margin: 1.25em 0.3em;
}

.section-1-button {
  padding: 0.93em 1.87em;
  background: #35495e;
  border-radius: 5px;
  display: block;
  color: #fff;
}

h3 {
  font-size: 5em;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

#logo {
  position: fixed;
  top: 20px;
  left: 20px;
  color: #fff;
  font-weight: bold;
  z-index: 99;
  font-size: 1.9em;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
}

/* Menu
 * --------------------------------------- */
#menu-line {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 159px;
  height: 2px;
  background: #fff;
}

#menu {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 70;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  letter-spacing: 1px;
  font-size: 1.1em;
}

#menu li {
  display: inline-block;
  margin: 10px 0px;
  position: relative;
}

#menu a {
  color: #fff;
  padding: 0 1.1em 1.1em 1.1em;
}

#menu li.active a:after {
  content: '';
  margin: 0 1.1em 0 1.1em;
  height: 2px;
  background: #fff;
  display: block;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  display: block;
}

/* Actions buttons
 * --------------------------------------- */
.actions {
  position: fixed;
  bottom: 2%;
  margin: 0 auto;
  z-index: 99;
  left: 0;
  right: 0;
  text-align: center;
}

.actions li {
  display: inline-block;
  margin: 0.3em 0.3em;
}

.actions-button {
  padding: 0.73em 1.47em;
  background: rgba(53, 73, 94, 0.47);
  border-radius: 5px;
  display: block;
  color: #fff;
  cursor: pointer;
}

/* Twitter
 * --------------------------------------- */
.twitter-share i {
  vertical-align: middle;
  position: relative;
  top: 2px;
  display: inline-block;
  width: 38px;
  height: 14px;
  color: white;
  top: -4px;
  left: -2px;
  fill: #fff;
}

.twitter-share svg {
  height: 40px;
  margin-top: -10px;
}

.view-github {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;
  padding: 0.93em 1.87em;
  background: #35495e;
  border-radius: 5px;
  display: block;
  color: #fff;
}
</style>

doc

转载:https://www.cnblogs.com/mybilibili/p/12263820.html
感谢原文作者，分享内容十分清楚明了；

基于vue项目实现整屏滚动 -- vue-fullpage 插
vue-fullpage.js 其实是fullpage.js 的vue.js 官方封装的插件。用法： 1.安装...
vue-fullpage.js 运行报错
记录使用vue-fullpage.js遇到的问题。 github地址：https://github.com/alv...
vue中使用fullpage
安装：引入： fullpage 配置 vue 调用 fullpapge 的方法完整代码 doc vue-ful...
vue-fullpage-ssr
原理：使用vue指令的方式,将fullpage.js进行封装；使其可以与vue或者nuxt项目更优雅的结合。 I...
过度动画
1，创建一个项目vue init webpack fullpage 3，运行项目 4，网页打开 6，使用数据设置...
fullpage插件的使用0802
fullpage插件的使用 1.基本使用 1.1 1.什么是FullPage?fullPage.js 是一个基于 ...
第十一周第五天笔记之fullpage全屏页面滚动插件
fullpage全屏页面滚动插件链接解读链接地址：fullpage基础知识解读 fullpage中遇到的问题吸顶...
FullPageAPI
fullpage配置项调用fullpage.js$('#fullpage').fullpage() sectio...
FullPage基本使用
FullPage 基于 jQuery的插件，它能够很方便、很轻松的制作出全屏滚动网站注意：由于fullPage....
fullPage.js控制台licenseKey报错
遇到以下报错情况，若引用的是fullPage.js，就在fullPage.js文件中搜索：license，将以下i...