骨架屏demo

最新推荐文章于 2023-04-06 12:00:34 发布

hy3528

最新推荐文章于 2023-04-06 12:00:34 发布

阅读量140

点赞数

分类专栏： html CSS

本文链接：https://blog.csdn.net/hy3528/article/details/111644333

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

css版本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>标题</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        [v-cloak] {
            display: none !important;
        }

        .title {
            width: 100%;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
        }
        .tximg{
            margin-top: 2rem;
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            overflow: hidden;
        }
        .tximg>img{
            width: 100%;
        }
        .loding {
            background: #EAEDF8;
        }
    </style>
</head>

<body>
    <div v-cloak id="Vue">
        <div class="title" v-bind:class="{loding:loding}">{{title}}</div>
        <div class="tximg" v-bind:class="{loding:loding}">
            <img :src="img" alt="">
        </div>
    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<script>
    window.alert = function (name) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    }
    new Vue({
        el: "#Vue",
        data: {
            loding: true,//骨架屏
            title: "",
            img:""
        },
        created() {
            document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px'
            setTimeout(() => {
                this.title = "我过了1.5秒才有"
                this.img = 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2819344467,1935426999&fm=26&gp=0.jpg'
                this.loding = false
            }, 1500)
            //     let that = this
            // $.ajax({
            //     type: "get",	//请求方式
            //     async: false,
            //     url: "",
            //     data: {},		//传值给后台
            //     dataType: "json",
            //     success: (res) => {
            //         console.log(res)
            //
            //     },
            // });
        },
        methods: {
            // 请求公共方法
            ajax(type, url, params, cb) {
                $.ajax({
                    type: type,
                    url: url,
                    data: params,
                    dataType: "json",
                    async: false,
                    success: (response) => {
                        cb(response)
                    }
                });
            },
        }
    })
</script>

</html>

hy3528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
骨架屏demo

css版本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-
复制链接

扫一扫