评论

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

骨架屏

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

这个一点进去,挖,不得了啊,马上生成了当前页面的骨架屏幕代码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渲染你原来的正常页面。

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

最后一次编辑于  2020-04-22  
点赞 3
收藏
评论

10 个评论

  • Dr.♀水
    Dr.♀水
    2020-04-24

    我怎么找不到···

    2020-04-24
    赞同 1
    回复 10
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-04-25
      模拟器的右下角小眼睛旁边的...里面
      2020-04-25
      回复
    • Dr.♀水
      Dr.♀水
      2020-04-26
      没有呀···
      2020-04-26
      回复
    • Dr.♀水
      Dr.♀水
      2020-04-26回复Dr.♀水
      还没更新 我刚刚更新了 。 已经用上了···
      2020-04-26
      回复
    • 阿祥
      阿祥
      2020-04-28回复Admin²⁰²¹
      我怎么找不到。。
      2020-04-28
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-04-28回复阿祥
      新版本也没有吗?那就是mac版才有的?
      2020-04-28
      回复
    查看更多(5)
  • 林子
    林子
    2020-04-22

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

    2020-04-22
    赞同 1
    回复 2
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-04-22
      不对哈,很早前就有了。只是用0421版本做演示的
      2020-04-22
      回复
    • 林子
      林子
      2020-04-22回复Admin²⁰²¹
      哦 我今天才发现
      2020-04-22
      回复
  • futyh_ag
    futyh_ag
    01-17

    折腾了半天也没搞出来。放弃了

    01-17
    赞同
    回复
  • 墨染绘手
    墨染绘手
    2020-09-29

    官方文档https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

    2020-09-29
    赞同
    回复
  • blah blah blah
    blah blah blah
    2020-09-24

    使用uniapp开发的小程序可以使用骨架屏吗?

    2020-09-24
    赞同
    回复 1
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-09-24
      uni-app开放的也支持,不过对接可能会麻烦点。
      可能需要手动复制生成的wxss样式复制到vue里面。
      我没有具体实施过。原理是一样
      2020-09-24
      回复
  • 张小龙
    张小龙
    2020-06-08

    这里每次都要手动添加<template name="">...</template>,重新生成后需要再次添加,有没有简单办法

    2020-06-08
    赞同
    回复
  • ༺ൢErnestൢ༻
    ༺ൢErnestൢ༻
    2020-05-19

    我刚研究,还不会使用,感谢分享

    2020-05-19
    赞同
    回复 1
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-19
      不客气,这是我应该做的~能帮到你是我的荣幸!希望咱们能继续在社区保持交流
      2020-05-19
      回复
  • 大神博士
    大神博士
    2020-05-08

    我怎么看不到了

    2020-05-08
    赞同
    回复 1
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-19
      开发者工具版本太低?
      2020-05-19
      回复
  • 小肥羊
    小肥羊
    2020-04-24
    过来学习
    2020-04-24
    赞同
    回复
  • wang li
    wang li
    2020-04-22

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

    2020-04-22
    赞同
    回复 1
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-04-25
      有可能,这个生成的骨架屏代码还有很多可以优化的地方,比较繁琐。
      2020-04-25
      回复
登录 后发表内容