本文主要和大家详细介绍了vue实现页面加载动画效果，vue页面出现正在加载的初始页面与实现动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
currentPage, 'page-current': option.index === currentPage}">
页面正在渲染中。。。
登录后复制
有木有感觉很简单
下面上点干货，实现页面的动画效果
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); } }) }}.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); }}
登录后复制
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
相关推荐：
立即学习“前端免费学习笔记（深入）”；
如何利用HTML5实现等待加载动画的效果
超酷CSS3 loading加载动画特效
分享8款优秀的 jQuery 加载动画和进度条插件_jquery
以上就是vue页面加载动画效果的实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787035.html
