使用vue實(shí)現(xiàn)加載頁

更新時(shí)間：2022年07月05日 13:09:55 作者：歌聲緩緩

這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)加載頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了用vue實(shí)現(xiàn)加載頁的具體代碼，供大家參考，具體內(nèi)容如下

<template>
? ? <div class="bac" style="height:1024px;display: flex;align-items: center;justify-content: center;">
? ? ? ? <div class="wrap-content">
? ? ? ? ? ? <img class="logo" src="../../assets/img/logo.png" :style="{'margin-left':percent}">
? ? ? ? ? ? <div class="bar">
? ? ? ? ? ? ? ? <div :style="{width:percent}" class="loadingBar">

? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="percentFont">{{percent}}</div>
? ? ? ? ? ? <div class="fontTitle">報(bào)告生成中...</div>
? ? ? ? </div>
? ? </div>
</template>

<script>
? ? export default {
? ? ? ? name: "loading",
? ? ? ? data() {
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? count: 0,
? ? ? ? ? ? ? ? percent:'0',
? ? ? ? ? ? ? ? imgs:[
? ? ? ? ? ? ? ? ? ? require("@/assets/img/bg.png"),
? ? ? ? ? ? ? ? ? ? require("@/assets/img/icon1.png"),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/icon2.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/icon3.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/icon4.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/icon5.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/icon6.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/loading-bg.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/logo.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/page3-title.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/pic1.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/pic2.png'),
? ? ? ? ? ? ? ? ? ? require('@/assets/img/pic3.png')
? ? ? ? ? ? ? ? ?)
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? this.preload();
? ? ? ? },
? ? ? ? watch:{
? ? ? ? ? ? count: function (val) {

? ? ? ? ? ? ? ? if ( val === this.imgs.length) {
? ? ? ? ? ? ? ? ? ? // 圖片加載完成后跳轉(zhuǎn)頁面
? ? ? ? ? ? ? ? ? ? console.log(" 準(zhǔn)備就緒 >>>", val)
? ? ? ? ? ? ? ? ? ? this.$router.push({path: 'index'})
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? preload:function () {
? ? ? ? ? ? ? ? for (let img of this.imgs) {
? ? ? ? ? ? ? ? ? ? let image = new Image()
? ? ? ? ? ? ? ? ? ? image.src = img
? ? ? ? ? ? ? ? ? ? image.onload = () => {
? ? ? ? ? ? ? ? ? ? ? ? this.count++
? ? ? ? ? ? ? ? ? ? ? ? // 計(jì)算圖片加載的百分?jǐn)?shù)，綁定到percent變量
? ? ? ? ? ? ? ? ? ? ? ? let percentNum = Math.floor(this.count / this.imgs.length * 100)
? ? ? ? ? ? ? ? ? ? ? ? if (percentNum == 100) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? percentNum = 99
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? this.percent = `${percentNum}%`
? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>

<style scoped>
? ? .bac {
? ? ? ? width: 100%;
? ? ? ? background: url("../../assets/img/loading-bg.png") no-repeat top right;
? ? ? ? background-size: 100% 100%;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? }
? ? .logo{
? ? ? ? width: 98px;
? ? ? ? height: 98px;
? ? }
? ? .percentFont {
? ? ? ? font-size: 32px;
? ? ? ? color: #046353;
? ? ? ? letter-spacing: 0.84px;
? ? ? ? text-align: center;
? ? ? ? margin-top: 32px;
? ? }

? ? .bar {
? ? ? ? margin-top: 50px;
? ? ? ? width: 300px;
? ? ? ? height: 8px;
? ? ? ? opacity: 0.8;
? ? ? ? background: #FFFFFF;
? ? ? ? border-radius: 4px;
? ? }

? ? .loadingBar {
? ? ? ? height: 8px;
? ? ? ? background-image: linear-gradient(-47deg, #046353 0%, #046353 100%);
? ? ? ? border-radius: 4px;
? ? }

? ? .fontTitle {
? ? ? ? margin-top: 12px;
? ? ? ? font-size: 32px;
? ? ? ? color: #046353;
? ? ? ? letter-spacing: 0.84px;
? ? ? ? text-align: center;
? ? ? ? font-weight: 400;
? ? }
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: