点餐微信小程序_vue完成页面加载动画效果

vue实现页面加载动画效果       这篇文章主要为大家详细介绍了vue实现页面加载动画效果,vue页面出现正在加载的初始页面与实现动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

 template 
 section 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 v-else 页面正在渲染中。。。 /section 
 /template 

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

 template 
 nav 
 button v-if="option.arrowsType" :class="{moving:option.arrowsType === 'animate'}" @click="changePage(prevIndex)" /button 
 ul v-if="option.navbar" 
 li v-for="index in pageNum" @click="changePage(index)" : :key="'controller-'+index" :data-index="index" /li 
 /ul 
 button v-if="option.arrowsType" :class="{moving:option.arrowsType === 'animate'}" @click="changePage(nextIndex)" /button 
 /nav 
 /template 
 script 
export default {
 name: 'page-controller',
 pro凡科抠图: {
 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组件的教程,请大家点击专题进行学习。

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


相关阅读