vue实现页面加载动画效果


Posted in Javascript onSeptember 19, 2017

我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码

<template>
 <section class="page" v-if="option" 
  :style="{background: option.background,color: option.color||'#fff'}"  
  :class="{'page-before': option.index < currentPage,
    'page-after': option.index > currentPage,
    'page-current': option.index === currentPage}">
  <div :class="{'all-center': option.isCenter}">
   <slot></slot>
  </div>
 </section>
 <section class="page" v-else>页面正在渲染中。。。</section>
</template>

有木有感觉很简单
下面上点干货,实现页面的动画效果

<template>
 <nav class="controller">
  <button v-if="option.arrowsType" class="prev-btn" :class="{moving:option.arrowsType === 'animate'}" @click="changePage(prevIndex)"></button>
  <ul v-if="option.navbar">
   <li v-for="index in pageNum" @click="changePage(index)" :class="{current:option.highlight && index === currentPage}" :key="'controller-'+index" :data-index="index" class="controller-item"></li>
  </ul>
  <button v-if="option.arrowsType" class="next-btn" :class="{moving:option.arrowsType === 'animate'}" @click="changePage(nextIndex)"></button>
 </nav>
</template>

<script>
export default {
 name: 'page-controller',
 props: {
 pageNum: Number,
 currentPage: Number,
 option: {
  type: Object,
  default: {
  arrowsType: 'animate',
  navbar: true,
  highlight: true,
  loop: true  //是否开启滚动循环
  }
 }
 },
 methods: {
 changePage (index) {
  this.$emit('changePage', index);
 }
 },
 computed: {
 nextIndex () {
  if (this.currentPage === this.pageNum) {
  if(this.option.loop){
   return 1
   }else{
   return this.pageNum
   }
  } else {
  return this.currentPage + 1;
  }
 },
 prevIndex () {
  if (this.currentPage === 1) {
  if(this.option.loop){
   return this.pageNum
   }else{
   return 1
   }
  } else {
  return this.currentPage - 1;
  }
 }
 },
 created () {
 if (this.option.navbar === undefined) {
  this.option.navbar = true;
 }
 },
 mounted () {
 let _this = this;
 let timer = null;
 let start = 0;
 // 滚轮处理
 function scrollHandler (direction) {
  // 防止重复触发滚动事件
  if (timer != null) {
  return;
  }
  if (direction === 'down') {
  _this.changePage(_this.nextIndex);
  } else {
  _this.changePage(_this.prevIndex);
  }
  timer = setTimeout(function() {
  clearTimeout(timer);
  timer = null;
  }, 300);
 }
 // if (Object.hasOwnProperty.call(window,'onmousewheel')) {
 if (Object.hasOwnProperty.call(window,'onmousewheel')) {
  // 监听滚轮事件
  window.addEventListener('mousewheel',function (event) { // IE/Opera/Chrome
  let direction = event.wheelDelta > 0 ? 'up':'down';
  scrollHandler(direction);
  },false);
 } else {
  window.addEventListener('DOMMouseScroll',function (event) { // Firefox
  let direction = event.detail > 0 ? 'up':'down';
  scrollHandler(direction);
  },false);
 }
 // 移动端触摸事件处理
 window.addEventListener('touchstart', function (event) {
  start = event.touches[0].clientY;
 })
 window.addEventListener('touchmove', function (event) {
  event.preventDefault();
 })
 window.addEventListener('touchend', function (event) {
  let spacing = event.changedTouches[0].clientY - start;
  let direction;  
  if (spacing > 50) {
  direction = 'up';
  scrollHandler(direction);
  } else if (spacing < -50) {
  direction = 'down';
  scrollHandler(direction);
  }
 })
 }
}
</script>

<style scoped>
.controller {
 position: fixed;
 right: 20px;
 top: 50%;
 z-index: 99;
}
.controller ul {
 transform: translate3d(0,-50%,0);
 list-style: none;
 margin: 0;
 padding: 0;
}
.controller-item {
 cursor: pointer;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 margin-top: 10px;
 background-color: rgba(255, 255, 255, 0.3);
 transition: background-color 0.3s ease 0s;
}
.controller-item:hover {
 background-color: rgba(255, 255, 255, 0.7);
}
.controller-item.current {
 background-color: rgba(255, 255, 255, 1);
}
.prev-btn,.next-btn {
 cursor: pointer;
 display: block;
 text-align: center;
 width: 20px;
 height: 20px;
 position: fixed;
 left: 50%;
 margin-left: -10px;
 border: 4px solid #fff;
 background-color: transparent;
 outline: none;
}
.prev-btn {
 top: 80px;
 transform: rotate(-45deg);
 border-bottom-color: transparent;
 border-left-color: transparent;
}
.next-btn {
 bottom: 80px;
 transform: rotate(45deg);
 border-top-color: transparent;
 border-left-color: transparent;
}
.prev-btn.moving {
 animation: prev-up-down 0.7s linear 0s infinite;
}
.next-btn.moving {
 animation: next-up-down 0.7s linear 0s infinite;
}
@keyframes next-up-down {
 0% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
 25% {
 transform: translate3d(0,6px,0) rotate(45deg);
 }
 50% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
 75% {
 transform: translate3d(0,-6px,0) rotate(45deg);
 }
 100% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
}
@keyframes prev-up-down {
 0% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
 25% {
 transform: translate3d(0,-6px,0) rotate(-45deg);
 }
 50% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
 75% {
 transform: translate3d(0,6px,0) rotate(-45deg);
 }
 100% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
}
</style>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
js中如何完美的解析数据
Mar 18 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
JS实现简单的表格增删
Jan 16 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 #Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 #Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 #Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 #Javascript
JavaScript 中的 this 简单规则
Sep 19 #Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 #Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 #Javascript
You might like
php 定界符格式引起的错误
2011/05/24 PHP
yii操作cookie实例简介
2014/07/09 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php生成curl命令行的方法
2015/12/14 PHP
php socket通信简单实现
2016/11/18 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
Javascript无阻塞加载具体方式
2013/06/28 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
python更新列表的方法
2015/07/28 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python变量赋值的秘密分享
2018/04/03 Python
python和c语言的主要区别总结
2019/07/07 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python中p-value的实现方式
2019/12/16 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
JBL英国官网:JBL UK
2018/07/04 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
公司离职证明范本(汇总)
2014/09/10 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
保姆聘用合同
2015/09/21 职场文书
优秀创业计划书分享
2019/07/19 职场文书
keepalived + nginx 实现高可用方案
2022/12/24 Servers