微信開發者工具穩定版：微信小程序骨架屏

示例：

此功能在vue項目上編寫

文檔出於Ant Design

希望各位小夥伴多多點贊收藏轉發

源碼給上：

首先現在項目里引入skeleton.js

vue項目引入方式

import skeleton from 'vue-skeleton-component'
Vue.use(skeleton)

HTML

<template>
	<div class="weui-panel weui-panel_access">
		<!-- list -->
		<div class="article-list-div">
			<p style="color: rgba(0,0,0,.9);font-size: 15px;font-weight: 700;padding-left: 16px;line-height: 50px;border-bottom: 1px solid rgba(0,0,0,.1);">
				vue版骨架屏渲染
			</p>
			<div class="article-render" v-for="item in articleList" :key="item">
				<div class="header-img">
					<img :src="item.img" alt="">
				</div>
				<div class="article-info">
					<p class="title">
						{{ item.title }}
					</p>
					<p class="des">
						{{ item.des }}
					</p>
				</div>
			</div>
			<div class="article-render" v-for="item in 10" v-show="rendering">
				<div class="header-img">
					<skeleton type='circlecom' active :options="{width: '80px'}" />
				</div>
				<div class="article-info">
					<p class="title"></p>
					<p class="des">
						<skeleton type='listcom' active :options="{row: 3,lineHight: 20}" />
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

CSS

.article-render {
		padding: 15px;
		overflow: hidden;
}
.header-img {
		width: 80px;
		height: 80px;
		display: inline-block;
		float: left;
}
.header-img img{width: 100%;height: 100%;}
.article-info {
		padding-left: 100px;
}
.article-info p {
		font-size: 20px;
		color: #666;
}
.article-info .title {
		margin-bottom: 5px;
}
.article-info .des {
		font-size: 14px;
		color: #888;
}
.CircleCom_OPdPNcc3,
.listCom_2QHM1mDh {
		padding: 0;
}

JS

export default {
		name: 'Skeleton',
		data() {
			return {
				articleList: [],
				rendering:true,
			}
		},
		mounted() {
			this.articleListRender();
		},
		methods: {
			articleListRender() {
				this.articleList = [{
					img: 'https://dss0.baidu.com/73t1bjeh1BF3odCf/it/u=2858001215,828905968&fm=85&s=B82356320341414110475CDE0300F0BB',
					title: '網頁骨架屏',
					des: `什麼是骨架屏呢？骨架屏(Skeleton Screen)是指在頁面數據載入完成前，先給用戶展示出頁面的大致結構（灰色占點陣圖），在拿到介面數據後渲染出實際頁面內容然後替換掉。Skeleton Screen 是近兩年開始流行的載入控制項，本質上是界面載入過程中的過渡效果。
					假如能在載入前把網頁的大概輪廓預先顯示，接著再逐漸載入真正內容，這樣既降低了用戶的焦灼情緒，又能使界面載入過程變得自然通暢，不會造成網頁長時間白屏或者閃爍。這就是 Skeleton Screen ！`
				},{
					img: 'https://dss0.baidu.com/73x1bjeh1BF3odCf/it/u=245465413,3123130741&fm=85&s=409708722C735BAF750BBBFB0300A02F',
					title: '客戶端骨架屏詳解',
					des: `一直以來，無論是Web還是iOS、Android的應用中，為了提升應用的載入等待這段時間的用戶感知體驗，各種技術層出不窮。其中，尤以菊花圖以及由它衍生各種載入動畫最為突出。
對於菊花圖我們自不必多說，現在對於載入的設計體驗有了比菊花載入體驗更棒的方法，即大家常看到的Skeleton Screen Loading，中文叫做骨架屏。`
				},{
					img: 'https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1597993201,2281568722&fm=173&app=49&f=JPEG?w=312&h=208&s=E9C23366BE27B77452E967BA0300C086',
					title: '迅雷X 10.1.27正式版發布：優化下載引擎',
					des: `IT之家12月24日消息 此前迅雷X已發布了正式版，Electron軟體框架完全重寫了迅雷X主界面，並且對下載引擎進行了全面的改進升級。適配了2K/4K高清屏幕，文字顯示效果也變得更加清晰細膩。`
				},{
					img: 'https://pics4.baidu.com/feed/f703738da97739120882827c20b4c51e377ae2bf.jpeg?token=04ec19cc16ec6299d06d3ecd06373c62&s=5E1039C458705A9ACC9184F50300C012',
					title: '微信小程序直播功能來了，然後呢？',
					des: `很榮幸2月14日自家的小程序收到了騰訊小程序直播功能的內測邀請，今天閑下來把這個功能的前後端界面設計和一些分析梳理出來，讓更多的小夥伴可以先睹為快！`
				},{
					img: 'https://pics3.baidu.com/feed/18d8bc3eb13533fa848faa42f1ccb91941345b41.jpeg?token=067457b905636c3d5fd90e6448013968&s=3141F1042CE9090531AEAF510300D0D9',
					title: '來往的繼續，釘釘從未放棄「社交」與「圈子」',
					des: `2月25日晚7點半，釘釘CEO無招準時與全國2億組織成員召開線上發布會。但與其說是一場新品發布會，不如說是一場專門為疫情期，疫情後的一場釘釘解決方案全家桶。無招指出，這是釘釘與阿里雲、達摩院、支付寶、阿里企業智能等集團部門的通力合作。

發布會上，無招先回溯了釘釘抗疫期間，緊急上線的員工健康打卡、企業復工平台、「無接觸考勤」解決方案等多款解決方案，以滿足企業復工復產的需求。隨後，有關釘釘5.0版本「巴顏喀拉」正式亮相，「在線辦公室」功能、構建私域流量新入口「圈子」成為本次發布會最大的亮點。`
				},{
					img: 'https://pics2.baidu.com/feed/37d3d539b6003af31dbb4b4865ac855a1038b625.jpeg?token=9a34768e588792560c198e13d2d5223b&s=E9C23A66F2E0935541F5E88A01007093',
					title: '傳iPhone12將支持新近距離Wi-Fi標準',
					des: `據了解，802.11ay是IEEE 802.11ad的後續規範，將帶寬提高了四倍，並增加了多達4個多路傳輸/接收流。使用60GHz頻譜的新Wi-Fi規範仍處於起草階段，但預計將於2020年底完成。
該博客稱這種無線標準為「超短距離」，這表明該標準可用於在iPhone例如AirDrop和附近其他蘋果設備之間進行通信。`
				},{
					img: 'https://pics0.baidu.com/feed/aa64034f78f0f736aaa55d2481acf01feac413be.jpeg?token=25b7e5f59b3dc0bcefe2327e2a3f566a&s=99F674844B230E0D18AFB90B030010C9',
					title: '5G基帶四巨頭的Wi-Fi 6晶元之戰',
					des: `當大部分人的手機仍暢遊在Wi-Fi 5網路中的時候，Wi-Fi 6已經悄然到來。去年2月，三星發布的Galaxy S10是首批支持Wi-Fi 6標準的手機，去年9月發布的iPhone 11系列也支持了Wi-Fi 6標準。
到了最近，小米10以及華為Mate Xs也都宣布支持Wi-Fi 6，小米和華為的Wi-Fi 6路由器也相繼亮相。`
				},{
					img: 'https://pics3.baidu.com/feed/95eef01f3a292df5f07a26e138b5186635a87317.jpeg?token=943daefcfe18e026a5cff93854cece47&s=D0B519D24470CF984526DBF003005035',
					title: 'iPhone 9最新渲染圖：外觀落伍，售價是唯一亮點',
					des: `隨著各方面的逐漸復甦，越來越多的的安卓旗艦新機也在不斷地發布。相信有一直關註明美無限的果粉們應該都了解，明美無限堅持分享的還是iPhone、iOS、蘋果最新的那些事。`
				},{
					img: 'https://pics4.baidu.com/feed/a8ec8a13632762d02315d92b6c514cfc503dc6bb.jpeg?token=c14f9084ef0e2f6dc3b605235939fb90&s=29E2A109584396DC453BE5950300008B',
					title: '產業互聯網的利刃，剜除社交電商的頑疾',
					des: `雖然很多人都在說電商行業正在經歷一場從未有過的大調整，但是，大調整的同時，電商行業並未停止進化，這個發展業已成熟的行業正在為尋找新的發展契機而努力。社交電商便是在這樣的大背景下誕生的。從表面上看，電商行業業已被阿里、京東為代表的頭部電商平台所把持，新玩家的進入難度不斷增加。實質上，電商行業依然存在機會，只要我們找准突破口，即使是在頭部電商平台的圍追堵截之下，依然有機會脫穎而出，`
				},{
					img: 'https://pics5.baidu.com/feed/b3b7d0a20cf431ad104336725821e8a92fdd9881.jpeg?token=5556ac13b928442e5c04484363b9a1b9&s=7802EC12430272F256A459E003003020',
					title: 'iPhone9宣傳海報流出：6種顏色時尚感爆棚，三千塊值了！',
					des: `隨著時間的推移，2月份馬上就要落下帷幕，不少廠商已經在這個月發布了新機，其中就包括小米10，iQOO3，realme X50 Pro，索尼X1 ll，三星S20系列等。而在3月份，我們還要迎來一些重磅新機，包括一加8，華為P40還有蘋果的iPhone9。相比其它手機來說，
iPhone9作為唯一的蘋果手機，相信期待的人會更多吧。而且iPhone9的最大特點就是首款三千檔卻配備了目前最強旗艦晶元的蘋果手機，同時在屏幕尺寸上iPhone9僅4.8寸，是時下唯一的小屏旗艦機。`
				},]
				this.rendering = false;
			}
		},
	}