vue-fullpage应用

1.vue-fullpage 是一个挺好用的全屏插件

git地址https://github.com/wendaosanshou/vue-fullpage

2.用法：npm 安装

npm install vue-fullpage --save

npm install animate.css --save

3.在main.js 中引入

import 'animate.css'
import 'vue-fullpage/vue-fullpage.css'
import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

4. app.vue template

<div class="fullpage-container">
  <div class="fullpage-wp" v-fullpage="opts">
    <div class="page-1 page">
      <p class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage</p>
    </div>
    <div class="page-2 page">
      <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
    </div>
    <div class="page-3 page">
      <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
      <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
      <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>
    </div>
  </div>
</div>
5.script

export default {
  data() {
    return {
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (prev, next) {
        },
        afterChange: function (prev, next) {
        }
      }
    }
  }
}
6.css 父级一定是充满全屏才可以 可以用定位来写

<style>
.page-container {
  position: absolute;
  left: 0;
  top: 0;
   100%;
  height: 100%;
}
</style>

7.api 文档地址 
https://github.com/wendaosanshou/vue-fullpage/blob/master/doc/api.md
可以实现各种动画效果
8.项目体验地址，用移动端打开 体验
https://www.66ykt.com/ut/gaozhen/home 
9，这个插件有一个bug 页面加入点击事件就会始终回到第一页，git里面给出了解决的方案。
可以将安装的依赖里面的js进行替换解决。

将下面的js 在新的文件夹里 新建一个 在main.js 中引入
index.js

'use strict';

var fullpage = {};

var opt = {

start: 0,

duration: 500,

loop: false,

dir: 'v',

der: 0.1,

movingFlag: false,

preventWechat: false,

needInitAfterUpdated: false,

beforeChange: function(data) {},

afterChange: function(data) {}

};

fullpage.install = function(Vue, options) {

var that = fullpage;

Vue.directive('fullpage', {

inserted: function(el, binding, vnode) {

var opts = binding.value || {};

that.init(el, opts, vnode);

},

componentUpdated: function(el, binding, vnode) {

if (!that.o.needInitAfterUpdated) {

return;

}

var opts = binding.value || {};

that.init(el, opts, vnode);

}

});

Vue.directive('animate', {

inserted: function(el, binding, vnode) {

if (binding.value) {

that.initAnimate(el, binding, vnode);

}

}

});

};

fullpage.initAnimate = function(el, binding, vnode) {

var that = fullpage;

var vm = vnode.context;

var aminate = binding.value;

el.style.opacity = '0';

vm.$on('toogle_animate', function(curIndex) {

var parent = el.parentNode;

while (parent.getAttribute('data-id') === null) {

parent = parent.parentNode;

}

var curPage = +parent.getAttribute('data-id');

if (curIndex === curPage) {

that.addAnimated(el, aminate);

} else {

el.style.opacity = '0';

that.removeAnimated(el, aminate);

}

});

};

fullpage.addAnimated = function(el, animate) {

var delay = animate.delay || 0;

el.classList.add('animated');

window.setTimeout(function() {

el.style.opacity = '1';

el.classList.add(animate.value);

}, delay);

};

fullpage.removeAnimated = function(el, animate) {

var classes = el.getAttribute('class');

if (classes && classes.indexOf('animated') > -1) {

el.classList.remove(animate.value);

}

};

fullpage.assignOpts = function(option) {

var that = fullpage;

var o = option || {};

for (var key in opt) {

if (!o.hasOwnProperty(key)) {

o[key] = opt[key];

}

}

that.o = o;

};

fullpage.initScrollDirection = function() {

if (this.o.dir !== 'v') {

this.el.classList.add('fullpage-wp-h');

}

};

fullpage.init = function(el, options, vnode) {

var that = fullpage;

that.assignOpts(options);

that.vm = vnode.context;

that.vm.$fullpage = that;

that.curIndex = that.o.start;

that.startY = 0;

that.o.movingFlag = false;

that.el = el;

that.el.classList.add('fullpage-wp');

that.parentEle = that.el.parentNode;

that.parentEle.classList.add('fullpage-container');

that.pageEles = that.el.children;

that.total = that.pageEles.length;

that.initScrollDirection();

window.setTimeout(function() {

that.width = that.parentEle.offsetWidth;

that.height = that.parentEle.offsetHeight;

for (var i = 0; i < that.pageEles.length; i++) {

var pageEle = that.pageEles[i];

pageEle.setAttribute('data-id', i);

pageEle.classList.add('page');

pageEle.style.width = that.width + 'px';

pageEle.style.height = that.height + 'px';

that.initEvent(pageEle);

}

that.moveTo(that.curIndex, false);

}, 0);

};

fullpage.initEvent = function(el) {

var that = fullpage;

that.prevIndex = that.curIndex;

el.addEventListener('touchstart', function(e) {

if (that.o.movingFlag) {

return false;

}

that.startX = e.targetTouches[0].pageX;

that.startY = e.targetTouches[0].pageY;

});

el.addEventListener('touchend', function(e) {

if (that.o.movingFlag) {

return false;

}

var dir = that.o.dir;

var sub =

dir === 'v'

? (e.changedTouches[0].pageY - that.startY) / that.height

: (e.changedTouches[0].pageX - that.startX) / that.width;

var der = sub > that.o.der ? -1 : sub < -that.o.der ? 1 : 0;

// that.curIndex推迟到moveTo执行完之后再更新

var nextIndex = that.curIndex + der;

if (nextIndex >= 0 && nextIndex < that.total) {

that.moveTo(nextIndex, true);

} else {

if (that.o.loop) {

nextIndex = nextIndex < 0 ? that.total - 1 : 0;

that.moveTo(nextIndex, true);

} else {

that.curIndex = nextIndex < 0 ? 0 : that.total - 1;

}

}

});

if (that.o.preventWechat) {

el.addEventListener('touchmove', function(e) {

e.preventDefault();

});

}

};

fullpage.moveTo = function(curIndex, anim) {

var that = fullpage;

var dist =

that.o.dir === 'v' ? curIndex * -that.height : curIndex * -that.width;

that.o.movingFlag = true;

var flag = that.o.beforeChange(that.prevIndex, curIndex);

if (flag === false) {

// 重置movingFlag

that.o.movingFlag = false;

return false;

}

that.curIndex = curIndex;

if (anim) {

that.el.classList.add('anim');

} else {

that.el.classList.remove('anim');

}

that.move(dist);

window.setTimeout(function() {

that.o.afterChange(that.prevIndex, curIndex);

that.o.movingFlag = false;

that.prevIndex = curIndex;

that.vm.$emit('toogle_animate', curIndex);

}, that.o.duration);

};

fullpage.move = function(dist) {

var xPx = '0px';

var yPx = '0px';

if (this.o.dir === 'v') {

yPx = dist + 'px';

} else {

xPx = dist + 'px';

}

this.el.style.cssText +=

'-webkit-transform:translate3d(' +

xPx +

', ' +

yPx +

', 0px);transform:translate3d(' +

xPx +

', ' +

yPx +

', 0px);';

};

if (window.Vue) {

window.VueFullpage = fullpage;

Vue.use(fullpage);

}

export default fullpage;

 

 

10.修改后的main.js

 

其他的都没个改变，这样解决了那个点击事件始终回到第一页的问题。

11.移动端体验地址

https://www.66ykt.com/ut/gaozhen/home