直接上源码，
注意的坑
1、小程序的 watch 监听不能用，在H5 平台这样没问题,反正就是这玩意不好用。
2、父组件调用子组件的方法得放到mounted里，不然就是undefined
加载组件
<template name="pre_loading_full">
<view id="loader-wrapper" v-show="show_loading">
<view id="loader"></view>
<view class="loader-section section-left"></view>
<view class="loader-section section-right"></view>
<view class="load_title">
{{ loading_title }} <br />
<!-- <span>V1.0</span> -->
</view>
</view>
</template>
<script>
/*
名称：简单全屏loading
日期：2020-02-25
作者：hj
目标：简单等待窗
*/
export default {
name: "pre_loading_full",
data() {
return {
show_loading: false,
loading_title: '玩命加载中'
};
},
// watch 不好用，换方法
// 小程序的 watch 监听不能用，在H5 平台这样没问题
// watch: {
// pre_show_loading(val) {
// console.log('监视 '+val);
// if(val=='false'){
// this.show_loading=false;
// }else{
// this.show_loading=true;
// }
// this.beginLoading();
// }
// },
onLoad() {
console.log('加载完成');
},
methods: {
pre_loading:function(){
console.log('开始加载。。。。。。。。。');
this.show_loading=true;
this.beginLoading();
},
beginLoading: function() {
var bl;
var num = 1;
var that = this;
bl = setInterval(function() {
that.loading_title = that.loading_title + '.';
num = num + 1;
if (num > 6) {
num = 1;
that.loading_title = '玩命加载中';
}
if (!that.show_loading) {
clearInterval(bl);
}
}, 500);
}
}
}
</script>
<style scoped>
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
margin: 0 0 0 -30px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 1 */
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 2 */
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
/* COLOR 3 */
-moz-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-webkit-animation: spin 1.5s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 50%;
height: 100%;
background: rgba(25, 63, 101, 0.15);
/* Old browsers */
z-index: 1000;
-webkit-transform: translateX(0);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(0);
/* IE 9 */
transform: translateX(0);
/* Firefox 16+, IE 10+, Opera */
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%);
/* IE 9 */
transform: translateX(-100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.5s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.5s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%);
/* IE 9 */
transform: translateX(100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateY(-100%);
/* IE 9 */
transform: translateY(-100%);
/* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
/* JavaScript Turned Off */
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: "Open Sans";
color: rgba(30, 7, 241, 0.979);
font-size: 16px;
font-weight: bold;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 16px;
color: #fff;
opacity: 0.5;
}
</style>
调用的父组件
<template>
<view class="content">
<loading ref="fullloading"></loading>
<image class="logo" src="/static/logo.png" @click="fun_test"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
import loading from "../../components/pre_loading.vue"
var _self;
export default {
components: {
loading
},
data() {
return {
title: 'Hello',
}
},
onLoad() {
_self = this;
// _self.fun_loading(); // 在onLoad里调用 结果 undefined
},
mounted() {
// 这里的访问都是正常的【注：this.$refs必须父组件渲染完毕之后才能正常访问内部的属性或方法】
// console.log("mounted", this.$refs);
// console.log("mounted", this.$refs.fullloading);
_self.fun_loading(); // 在onLoad里调用 结果 undefined
},
methods: {
fun_test: function() {
},
fun_loading: function() {
console.log('加载。。。。');
console.log(_self.$refs.fullloading);
// _self.$refs.fullloading.pre_loading();
this.$refs.fullloading.pre_loading();
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
效果
来源：oschina
链接：https://my.oschina.net/qingqingdego/blog/3174147