Vue-Router 页面正在加载特效

Vue-Router 页面正在加载特效

如果你在使用 Vue.js 和 Vue-Router 开发单页面应用。因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染到页面上。

例如,这里有个用户个人资料的页面。

user.vue 文件如下:

<template>
<div>
<h2 v-text="user.name"></h2>
<p v-text="user.description"></p>
</div>
</template>
<script>
export default{
data(){
return{
user: {}
}
}
}
</script>

在动画过渡期间向服务器请求数据,如下:

<script>
export default{
data(){
return{
user: {}
}
},
route: {
data: function (transition) {
this.getUserDetails(transition);
}
},
methods: {
getUserDetails(transition)
{
this.$http.get('/users/' + this.$route.params.userName)
.then(function (response) {
this.user = response.data;
transition.next();
});
}
}
}
</script>

这样,我们可以通过访问变量 $loadingRouteData。就可以实现隐藏所有的页面元素,显示某个正在加载的元素,比如某个 logo 等。

<div v-if="$loadingRouteData">
<div class="white-widget grey-bg author-area">
<div class="auth-info row">
<div class="timeline-wrapper">
<div class="timeline-item">
<div class="animated-background">
<div class="background-masker header-top"></div>
<div class="background-masker header-left"></div>
<div class="background-masker header-right"></div>
<div class="background-masker header-bottom"></div>
<div class="background-masker subheader-left"></div>
<div class="background-masker subheader-right"></div>
<div class="background-masker subheader-bottom"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="!$loadingRouteData">
<div>
<h2 v-text="user.name"></h2>
<p v-text="user.description"></p>
</div>
</div>

比如,正在加载的样式代码如下:

.timeline-item {
background: #fff;
border-bottom: 1px solid #f2f2f2;
padding: 25px;
margin: 0 auto;
} @keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
} .animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 40px;
position: relative;
} .background-masker {
background: #fff;
position: absolute;
} /* Every thing below this is just positioning */ .background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
top: 0;
left: 40px;
right: 0;
height: 10px;
} .background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
top: 10px;
left: 40px;
height: 8px;
width: 10px;
} .background-masker.header-bottom {
top: 18px;
height: 6px;
} .background-masker.subheader-left,
.background-masker.subheader-right {
top: 24px;
height: 6px;
} .background-masker.header-right,
.background-masker.subheader-right {
width: auto;
left: 300px;
right: 0;
} .background-masker.subheader-right {
left: 230px;
} .background-masker.subheader-bottom {
top: 30px;
height: 10px;
} .background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
} .background-masker.content-top {
height:20px;
} .background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
width: auto;
left: 380px;
right: 0;
top: 60px;
height: 8px;
} .background-masker.content-second-line {
top: 68px;
} .background-masker.content-second-end {
left: 420px;
top: 74px;
} .background-masker.content-third-line {
top: 82px;
} .background-masker.content-third-end {
left: 300px;
top: 88px;
}

这样,你就有了 Vue-Router 的正在加载时候的效果了。你可以把以上代码写进到一个单独的组件内,在你用的地方引用它就行。

最后

这仅是个关于 Vue-Router 加载的组件的简单教程,实际上可以在许多地方来进行改进,

VueJobs.com

如果你是一位对 Vue.js 感兴趣的前端工程师,可去这个网上浏览下,了解下国外对 Vue 开发者的要求。

上一篇:第四章 Spring.Net 如何管理您的类___对象的初始化方式


下一篇:tensorflow训练自己的数据集实现CNN图像分类2(保存模型&测试单张图片)