如何实现微信小程序骨架屏的优雅设计及详细解析？

本文共计779个文字，预计阅读时间需要4分钟。

一、演示

二、说明

实现思路：需要默认数据，这样才能完美应对list、wx:if等条件，以及flex宽度根据内容撑开的样式。替换思路：类似imageLoader加载器类，先展示默认图片，拿到数据后再显示。

一、演示

二、说明：

实现思路：需要默认数据，这样才能完美应对list,wx:if的情况，及flex宽度靠内容撑开的样式。

替换思路：和imageLoader加载器类似：先展示默认图片，拿到数据之后显示真实的图片

具体实现：

页面准备一份默认数据：defaultData

xml中：<skeleton watchData={{与卡槽笨蛋一样的对象}}><slot/></skeleton>

页面onload时，data=defaultData

此时：watchData第一次收到数据(第一次为onload时)，靠默认数据，撑开卡槽容器，自身opacity:0;

此后，再收到数据就关闭骨架屏

优点：

1.好维护：页面没有额外的xml。也没有额外的css。只需要维护一份默认数据即可。

2.更优雅，更真实：多个请求，会看到分批次的替换。而不需要全请求成功才替换。