博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-fullpage应用
阅读量:6407 次
发布时间:2019-06-23

本文共 5905 字,大约阅读时间需要 19 分钟。

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

vue-fullpage

vue-fullpage

vue-fullpage

vue-fullpage

vue-fullpage

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

 

 
 
 

转载于:https://www.cnblogs.com/zhengao/p/9891183.html

你可能感兴趣的文章
JavaScript之DOM-9 HTML DOM(HTML DOM概述、常用HTML DOM对象、HTML表单)
查看>>
技术成长之路(一)
查看>>
中国北方国际五金城硬件选型
查看>>
php.exe启动时提示缺少MVCR110.dall 64位 window系统 解决
查看>>
判断是否为数字方法
查看>>
[翻译] EF Core in Action 关于这本书
查看>>
js Uncaught TypeError: undefined is not a function
查看>>
数据库存储引擎
查看>>
[2019.2.13]BZOJ4318 OSU!
查看>>
版本号带两个小数点的,如何比较大小?( NSStringCompareOptions )
查看>>
QCustomplot使用分享(三) 图
查看>>
什么是java?
查看>>
WPF路径动画(动态逆向动画)
查看>>
Low Level Reader Protocol (LLRP) 简介
查看>>
[Micropython]TPYBoard v10x NRF24L01无线通讯模块使用教程
查看>>
mysql中show processlist过滤和杀死线程
查看>>
最新Sublime Text 2 激活 汉化
查看>>
spring为什么推荐使用构造器注入
查看>>
基础数据类型之字典
查看>>
第七次作业
查看>>