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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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 Ajax实现无刷新附件上传
2016/08/17 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
js跑步算法的实现代码
2013/12/04 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python 多线程实例详解
2017/03/25 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python eval函数介绍及用法
2020/11/09 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
什么是.net
2015/08/03 面试题
Servlet面试题库
2015/07/18 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
开业主持词
2014/03/21 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
公司2015年终工作总结
2015/05/26 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python