实现效果:
加载时:
加载完成时;
实现代码:
通过vuex传入一个布尔值loading控制加载动画显示与否,动画关闭时,通过slot标签显示本组件中包含的其他内容
组件代码:
<template> <view> <view class="loading-21 spinner" v-if="loading"> <view></view> <view></view> <view></view> <view></view> <view></view> <view></view> </view> <view style="height: 100%;" v-else> <slot></slot> </view> </view> </template> <script> import { // mapState } from 'vuex' export default { data() { return { loading: false } }, computed: { // ...mapState(['loading']) }, methods: {}, mounted() {} } </script> <style scoped> .spinner { margin: 100px auto; /* width: 50px; */ /* height: 60px; */ text-align: center; position: relative; } .loading-21 view { width: 40upx; height: 40upx; border-radius: 20upx; backface-visibility: hidden; position: absolute; animation-name: move; animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8); animation-iteration-count: infinite; animation-duration: 3s; top: calc(50% - 20upx); left: 50%; transform-origin: -20upx center; } .loading-21 view:nth-child(1) { background: #d24e51; animation-delay: -0.5s; opacity: 0; } .loading-21 view:nth-child(2) { background: #d24e51; animation-delay: -1s; opacity: 0; } .loading-21 view:nth-child(3) { background: #d24e51; animation-delay: -1.5s; opacity: 0; } .loading-21 view:nth-child(4) { background: #d24e51; animation-delay: -2s; opacity: 0; } .loading-21 view:nth-child(5) { background: #d24e51; animation-delay: -2.5s; opacity: 0; } .loading-21 view:nth-child(6) { background: #d24e51; animation-delay: -3s; opacity: 0; } @keyframes move { 0% { transform: scale(1) rotate(0deg) translate3d(0, 0, 1px); } 30% { opacity: 1; } 100% { z-index: 10; transform: scale(0) rotate(360deg) translate3d(0, 0, 1px); } } </style>
调用时:
<template> <view class="content"> <requset-loading> <view class=""> <text>text</text> </view> </requset-loading> </view> </template>
标签:slot,opacity,loading,封装,21,animation,background,vuex,view From: https://www.cnblogs.com/p201821460026/p/16728175.html