小程序骨架屏

前端 2020-12-26 1030

今天终于解答了一个困扰我很久的问题,饿了么,美团等app上的加载动画是如何做的,感觉体验蛮好的。我一直以为是使用gif,或者背景什么做的,今天才了解到是"骨架层",是不是很懵,我第一次接触到这个词,见字识意,就是页面的骨架,我看了微信小程序的骨架制作原理,就是对照着使用加载动画的页面生成了一份类似的结构和样式(如果页面很多都要使用,不知道打包文件会很大)。

先看效果:

小程序中自带了骨架层的配置,当然你也可以使用第三方的库,看个人选择。

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

{
    loading: true, // 骨架层

}

async getData () { // 获取页面所有的接口数据
    const {data: infos} = await bookModels.bookInfo();
    const {data: latestBooks} = await bookModels.latestBook({page_type: 'index'});
    setTimeout(() => {
      this.setData({
        infos,
        latestBooks,
        loading: false
      })
    }, 5000)

<!-- 骨架屏 -->
<import src="/pages/books/index/index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}"/>
<!-- end -->

@import "/pages/books/index/index.skeleton.wxss";

讲一个我遇到的坑,可以看这位老哥:https://developers.weixin.qq.com/community/develop/doc/0000443527c6801dc52b079d056c00

对于这个问题,只要在设置中配置mode:auto即可。遇到问题,还是要看文档,用百度都搜不出结果!

标签:前端

文章评论

评论列表

已有0条评论