axios vue 加载效果动画_vue实现页面加载动画效果

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

:style="{background: option.background,color: option.color||'#fff'}"

:class="{'page-before': option.index < currentpage,

'page-after': option.index > 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组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！