直入主题:vue项目中想做一个全屏翻滚的效果,vue-fullpage 就很不错

下面介绍vue-fullpage 的使用方法,这里封装成了vue的一个指令的形式来进行使用

1、安装vue-fullpage,最新版就可以

npm install vue-fullpage -S

2、入口文件main.js引入

import Vue from 'vue'
// vue全屏滚动使用
import VueFullpage from './utils/VueFullpage.js'
Vue.use(VueFullpage)

3、main.js同级下有文件utils/VueFullpage.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);
}
window.VueFullpage = fullpage; export default fullpage;

4、vueFullPage.vue使用页

<template>
<!-- vue全屏滚动 -->
<!-- 使用方法:安装vue-fullpage,until中放入VueFullpage.js, main.js中引入 -->
<!-- 如出现空白页时是因为数据还没加载完就渲染了v-fullpage,数据请求成功后在最外层加个 v-if展示判断 -->
<div class="fullPage">
<!-- 滚动区域容器 -->
<div class="fullpage-container">
<div class="fullpage-wp" v-fullpage="opts" v-if="isFullPage">
<div class="page pageFirst">
<img class="pageBanner" :src="reportBg1">
<div class="dataCont">
<p>第一页</p>
</div>
</div>
<div class="page">
<img class="pageBanner" :src="reportBg2">
<div class="dataCont">
<p>第二页</p>
</div>
</div>
<div class="page"><img class="pageBanner" :src="reportBg3">
<div class="dataCont">
<p>第三页</p>
</div>
</div>
<div class="page"><img class="pageBanner" :src="reportBg4">
<div class="dataCont">
<p>第四页</p>
</div>
</div>
</div>
</div>
<!-- 滚动区域容器 -->
</div>
</template> <script>
import 'vue-fullpage/vue-fullpage.css';
import "@/assets/css/pages/fullpage.scss";
import Vue from 'vue'
export default {
name: "vuefullPage",
components: {},
data() {
return {
isFullPage: true, //page里加v-if判断时避免空白页,请求接口完成后渲染页data-id按顺序排列
opts: {
start: 0,
loop: false,
duration: 500,
stopPageScroll: true,
loopHorizontal: true,
beforeChange: function(prev, next) {},
afterChange: function(prev, next) {}
},
//上下滑动大背景
reportBg1: require("@/assets/imgs/reportBg1.png"),
reportBg2: require("@/assets/imgs/reportBg2.png"),
reportBg3: require("@/assets/imgs/reportBg3.png"),
reportBg4: require("@/assets/imgs/reportBg4.png"),
}
},
mounted() {
let that = this;
},
watch: {},
methods: {}
}
</script>
<style scoped lang="less">
.fullpage-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
} .fullPage {
height: 100%;
}
.page {
.dataCont {
position: absolute;
top: 10%;
left: 7%;
}
}
</style>

vue-fullpage全屏插件使用的更多相关文章

  1. fullpage 全屏插件

     fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...

  2. java_eclipse_maven_svn_主题彩色插件_全屏插件

    作为一名不算新手的猿猿,还来纠结IDE环境搭建实属不该,不过着实纠结了不少时间. target: eclipse + maven +svn + 设置默认编码+全屏 绕的路就不说了,直奔主题,由于mav ...

  3. FullPage.js全屏插件文档及使用方法

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持 ...

  4. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  5. fullPage全屏滚动的实现

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 用法: 1.引入jquery 2.引入fullPage 3.每个section代表一屏 4.js启动: ...

  6. Eclipse/MyEclipse全屏插件

    此插件可以让Eclipse/MyEclipse的界面全屏,隐藏菜单栏和状态栏! MyEclipse 2014/2015中亲测有效! 插件下载: http://files.cnblogs.com/got ...

  7. vue浏览器全屏实现

    1.项目中使用的是sreenfull插件,执行命令安装 npm install --save screenfull 2.安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下: toggleFull ...

  8. vue video全屏播放

    需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...

  9. 虚拟机VMWare安装苹果系统MacOS详细教程(联网设置,全屏插件、文件互传)

    运行环境: VMware® Workstation 12 Pro(自行安装,或者用这个) 推荐(下面以10.11.6版本做的教程,但是安装时推荐使用此版本安装然后升级到10.11.6):MacOS X ...

  10. vue element 全屏不好用问题

    Chrome71版本使用screenfull.js全屏功能时报参数错误   在生产环境长期使用的一个“全屏”功能突然失效了,查看Console 如下报错: Failed to execute 'req ...

随机推荐

  1. UE4 WebUI插件使用指南

    在开发数字孪生应用程序的时候,除了三维场景展示之外,也需要开发丰富和酷炫的2D页面. 使用UE4的UMG开发图表显得比较笨拙. 而通过Web插件允许开发者创建丰富的基于Web HTML5的用户界面,它 ...

  2. python random模块几个常用方法

    python random模块几个常用方法 random.random()方法 random.uniform(a, b)方法 random.randint(a, b)方法 random.randran ...

  3. Cannot resolve module 'net' in stompjs

    解决方案1 stompjs 不支持客户端环境下运行需要作为开发依赖安装 npm install stompjs --save 解决方案2 webpack.config.js 增加这段 resolve: ...

  4. 重学c#系列——linq(2) [二十八]

    前言 前文提及到了一些基础的linq的基础,那么这一节是一些补充. 正文 关于一个orderby的问题. 比如我们输入两个order by. 这里告诉我们多个order by是没有意义的,如果多个那么 ...

  5. PyTorch复现GoogleNet学习笔记

    PyTorch复现GoogleNet学习笔记 一篇简单的学习笔记,实现五类花分类,这里只介绍复现的一些细节 如果想了解更多有关网络的细节,请去看论文<Going Deeper with Conv ...

  6. java中的递归机制

    本文主要讲述java中的递归机制. 示例1,递归代码如下: public class Recursion01 { public static void main(String[] args) { T ...

  7. Kubernetes监控手册-01体系概述

    Kubernetes 监控体系驳杂,涉及到的内容非常多,总是感觉摸不到头绪,网上虽然有很多资料,都略显凌乱,没有一个体系化的讲解,今天开始,我们准备撰写一系列文章,把 Kubernetes 监控说透, ...

  8. [机器学习] 特征选择笔记4-使用SelectFromModel特征选择

    特征选择 代码下载 本文主要介绍sklearn中进行特征选择的方法. sklearn.feature_selection模块中的类可用于样本集的特征选择/降维,以提高估计量的准确性得分或提高其在超高维 ...

  9. Spark详解(02) - Spark概述

    Spark详解(02) - Spark概述 什么是Spark Hadoop主要解决,海量数据的存储和海量数据的分析计算. Spark是一种基于内存的快速.通用.可扩展的大数据分析计算引擎. Hadoo ...

  10. 单例 pickle模块

    今日内容 单例模式实现的多种方式 方式一: class C1: __instance = None def __init__(self,name,age): self.name = name self ...