一、需求问题
在vue项目的开发中，会经常遇到这样的需求。当在页面内容进行加载的时候，会进行请求数据，然后显示页面。在这个等待的过程中，会出现一段时间的白屏，我们可以通过加一个loading的效果，进行过渡，然后显示页面。
二、需求分析
在components文件夹中，建立Loading文件夹，里面建立index.vue文件，作为Loading组件。这个加载组件在页面的多个位置中都可能会用的到，可以全局注册组件。在项目的main.js文件中写以下的代码配置，进行全局注册。
import Loading from '@/components/Loading'ponent('Loading', Loading);
在Loading组件中，我们只需要写上相应的结构和样式，让其进行展示loading的效果出来。
在需要使用Loading组件的页面中，直接进行使用。通过组件内部使用v-if而使用isLoading的值，在data中设置isLoading，默认为true。当在数据请求完毕以后，再将isLoading的值设为false。同时在使用Loading组件下面的页面内容，需要使用v-else，不然再请求完数据后无法显示页面内容。
三、需求实现
main.js
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'Vue.prototype.axios = axios;Vue.filter('setWH', (url, arg) => {return url.replace(/w\.h/, arg);});Vue.config.productionTip = false;import Scroller from '@/components/Scroller'// 全局注册 Scroller 组件ponent('Scroller', Scroller);import Loading from '@/components/Loading'ponent('Loading', Loading);new Vue({router,store,render: h => h(App)}).$mount('#app')
Loading下的index.vue，封装组件
<template><div class="loader"></div></template><script>export default {name: 'Loading'}</script><style lang="scss" scoped>$colors:hsla(337, 84, 48, 0.75)hsla(160, 50, 48, 0.75)hsla(190, 61, 65, 0.75)hsla( 41, 82, 52, 0.75);$size: 2.5em;$thickness: 0.5em;// Calculated variables.$lat: ($size - $thickness) / 2;$offset: $lat - $thickness;.loader {position: relative;width: $size;height: $size;transform: rotate(165deg);&:before,&:after {content: '';position: absolute;top: 50%;left: 50%;display: block;width: $thickness;height: $thickness;border-radius: $thickness / 2;transform: translate(-50%, -50%);}&:before {animation: before 2s infinite;}&:after {animation: after 2s infinite;}}@keyframes before {0% {width: $thickness;box-shadow:$lat (-$offset) nth($colors, 1),(-$lat) $offset nth($colors, 3);}35% {width: $size;box-shadow:0 (-$offset) nth($colors, 1),0 $offset nth($colors, 3);}70% {width: $thickness;box-shadow:(-$lat) (-$offset) nth($colors, 1),$lat $offset nth($colors, 3);}100% {box-shadow:$lat (-$offset) nth($colors, 1),(-$lat) $offset nth($colors, 3);}}@keyframes after {0% {height: $thickness;box-shadow:$offset $lat nth($colors, 2),(-$offset) (-$lat) nth($colors, 4);}35% {height: $size;box-shadow:$offset 0 nth($colors, 2),(-$offset) 0 nth($colors, 4);}70% {height: $thickness;box-shadow:$offset (-$lat) nth($colors, 2),(-$offset) $lat nth($colors, 4);}100% {box-shadow:$offset $lat nth($colors, 2),(-$offset) (-$lat) nth($colors, 4);}}html,body {height: 100%;}.loader {position: absolute;top: calc(50% - #{$size / 2});left: calc(50% - #{$size / 2});}</style>
使用组件
<template><div class="movie_body"><Loading v-if="isLoading"/><Scroller v-else> <ul><li v-for="item in comingList" :key="item.id"><div class="pic_show"><img :src="item.img | setWH('128,180')"></div><div class="info_list"><h2>{{item.nm }}<img v-if="item.version" src="@/assets//maxs.png" alt=""></h2><p><span class="person">{{item.wish }}</span> 人想看</p><p>主演：{{item.star }}</p><p>{{item.rt }}上映</p></div><div class="btn_pre">预售</div></li></ul></Scroller></div></template><script>export default {name: 'CommingSoon',data() {return {comingList: [],isLoading: true}},mounted() {this.axios.get('/api/movieComingList?cityId=10').then((res) => {var msg = res.data.msg;if ( msg === 'ok') {ingList = res.ingList;this.isLoading = false;}})}}</script><style scoped>#content .movie_body{flex:1; overflow:auto;}.movie_body ul{margin:0 12px; overflow: hidden;}.movie_body ul li{margin-top:12px; display: flex; align-items:center; border-bottom: 1px #e6e6e6 solid; padding-bottom: 10px;}.movie_body .pic_show{width:64px; height: 90px;}.movie_body .pic_show img{width:100%;}.movie_body .info_list {margin-left: 10px; flex:1; position: relative;}.movie_body .info_list h2{font-size: 17px; line-height: 24px; width:150px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}.movie_body .info_list p{font-size: 13px; color:#666; line-height: 22px; width:200px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}.movie_body .info_list .grade{font-weight: 700; color: #faaf00; font-size: 15px;}.movie_body .info_list img{width:50px; position: absolute; right:10px; top: 5px;}.movie_body .btn_mall , .movie_body .btn_pre{width:47px; height:27px; line-height: 28px; text-align: center; background-color: #f03d37; color: #fff; border-radius: 4px; font-size: 12px; cursor: pointer;}.movie_body .btn_pre{background-color: #3c9fe6;}</style>
