文章目录
- 前言
- uniapp网络延迟优化之骨架屏
- 一、骨架屏是什么？
- 二、使用步骤
- 1.在微信开发者工具生成骨架屏文件
- 2.转成vue组件
- 3.组件中使用
- 4.效果展示
- 4.开发时遇到的问题？
- 总结
前言
uniapp网络延迟优化之骨架屏
一、骨架屏是什么？
骨架屏的主要目的是提升用户体验，特别是在网络条件不佳或页面内容较为复杂、加载时间较长的情况下。通过显示骨架屏，用户可以立即感知到页面正在加载，并且能够预测出页面内容的结构，从而减少等待过程中的不确定性和焦虑感。
二、使用步骤
1.在微信开发者工具生成骨架屏文件
2.转成vue组件
因为生成的wxml文件，我们要在vue项目里去使用。
在src目录的自己的组件下创建一个components用来存放骨架屏组件。
在把微信开发者工具生成的wxml文件里面的标签复制到你创建的vue骨架屏组件中去。
注意：还要把wxss里面的样式也要存放到vue骨架屏组件里面去。
3.组件中使用
- 创建一个布尔值来控制你的骨架屏组件和本身自己要展示的组件。
- 页面初始化，一开始设置成isLoading设置为true。
- Promise.all()这个是用来限制，只有这4个请求全部返回成功才会放行，让后把isLoading设置为false,展示我们自己的组件就行了。
4.效果展示
4.开发时遇到的问题？
- 如果你生成的骨架屏组件不完整，你可以自行修改他的样式。（反正我是这样做的）但大部分都能满足需求。
总结
以上就是今天要讲的内容，本文仅仅简单介绍了uniapp骨架屏的使用。其实还有很多可以生成骨架屏这种效果，比如uniapp插件市场可以去看看。
