使用开发者工具骨架屏功能,自己做骨架屏就这么简单!!

发布于 6 年前作者 ztang1980 次浏览最后编辑 6 年前来自 share

模拟器的小眼睛旁边的有个骨架屏功能,如下图:

这个一点进去,挖,不得了啊,马上生成了当前页面的骨架屏幕代码XXX.skeleton.wxml和XXX.skeleton.wxss在同级目录下

(上图为开发者工具生成的骨架屏代码,里面的参考文档链接目前是404状态)

然后在你的主wxml里引用后写相关代码就可以啦:

1、import上一步生成的wxml。(wxss里也导入对应的wxss)

2、插入template,这个template的展示逻辑由wx:if的isLoading控制,原来的正常显示代码用wx:else显示。isLoading初始化为true,表示先显示骨架屏,等你数据请求处理完后setData isLoading为false渲染你原来的正常页面。

你就能看到没加载完成数据前的骨架屏效果啦啦啦~~

4 回复
leiwang
leiwang1 楼6 年前

确认了一件事,是21号版本出的功能,哈哈

mingao
mingao2 楼6 年前

我怎么找不到···

jie29
jie293 楼6 年前

过来学习

ming45
ming454 楼4 年前

文档打不开,是不是被弃用了