uni-app如何生成骨架屏

在页面请求加载缓慢的时候,总是会出现某个部分数据先渲染出来,而另外一个部分后渲染出来的问题,导致页面加载时非常的丑但是却很难控制。这时候我想到了骨架屏,它在颜值方面也不差,还能解决这一问题,下面来看一下实现方法吧~~

一、骨架屏代码生成

  1. 将项目代码运行到微信开发者工具中;
  2. 点击到要生成骨架屏的页面;
  3. 点击微信开发者工具下方三个点,然后点击生成骨架屏按钮,如下图所示;
    在这里插入图片描述
  4. 在弹出的提示中点击确定按钮,如下图所示;
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/4c539d8e77e94432ae5e4598a3161508.png
  5. 会在微信开发者工具中,生成上方提示的两个文件,如下图所示;
    在这里插入图片描述

二、将生成代码放入到uni-app项目中

  1. 在uni-app项目中,新建一个空的组件,名称任意;
  2. 将生成的.wxml结尾的文件中的代码粘贴到新建的组件<template></template>部分中;
  3. 将生成的.wxss结尾的文件中的代码粘贴到新建的组件<style></style>部分中;
    在这里插入图片描述

三、引入及使用效果

  1. 像引用其他组件一样,在页面中使用import 名称 from 路径,然后在components:{}中注册一下,在<template></template>使用即可;
  2. 最终的效果就如下图所示;
    在这里插入图片描述

四、特别注意

  1. 粘完代码后,将微信开发者工具中生成的两个文件删除,没有用了;删除后如果不好使重新运行一下程序;
  2. 引入组件,可能还是运行不起来,会报错时;查看组件中是否有is=""data-event-opts=""的代码,若有将这部分代码删除即可。

哈哈哈,你实现了吗?还有什么问题,欢迎留言评论哟~~😜

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐