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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 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作的文本留言本的例子(六)
2006/10/09 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
php生出随机字符串
2017/07/06 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JS的get和set使用示例
2014/02/20 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
租房协议书
2014/09/12 职场文书
初中政治教学工作总结
2015/08/13 职场文书
小学校园广播稿
2015/08/18 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技