新手制作uni-app小程序骨架原理（一）

愿你自在地走在街上，眼镜里是世俗，笑容里面是坦荡，骨子里面是善良，心里是明月长安————新手制作uni-app小程序骨架原理（一）

唠叨一会

还是习惯在开头唠叨唠叨，在做星茫ui3.0的时候 就说要试试制作uni-app小程序骨架，在插件市场有这操作，熟悉了下实现的方式后，大部分分就是现插入一个view，然后填充背景色，等数据加载好或写一个定时器3秒后关闭这个view就好了。目前好像能想到做骨架最简单的方式也就这样了

说明

1.本文只是说明了一下定时器的方式实现一个骨架

2.说明原理，还没有写成插件，如果要用到产品上还是制作成插件，或者先去插件市场下载

效果预览

实现步骤

枫瑞只是在开始前写了2个view一个作为骨架，一个是正式内容，在用v-if来判断是否显示，打开界面的时候执行created生命周期，触发 this.reloadData()函数

在插件市场上有一些部分无法达到自己的需求，那么我们是可以自定义写一个骨架，分享原理后，枫瑞也在短期内分享出制作插件教程和如何自己写一个骨架

<template> <view> <view v-if="loading" class="bk skeleton"></view> <view v-if="kgd" class="kg"></view> </view> </template> <script> export default { data() { return { loading: true, kgd:false } }, created() { this.reloadData() }, methods: { reloadData() { this.loading = true setTimeout(() => { this.loading = false this.kgd = true }, 3000) }, }, } </script> <style> .bk{ height: 300upx; width: 90%; margin-left: 5%; background-color: #cccccc; border-radius: 20upx; } .kg{ height: 300upx; width: 90%; margin-left: 5%; background: url(https://cdn.frbkw.com/wp-center/uploads/2020/02/1580981041-faa00d5b29ded9d.jpg); background-size: 100%; border-radius: 20upx; } .skeleton { animation: skeleton-blink 1.2s ease-in-out infinite; } @keyframes skeleton-blink { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } </style>