骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。
骨架屏作用是缓解用户等待时的焦虑情绪,属于用户体验优化方案。
微信开发者工具提供了自动生成骨架屏代码的能力。
正常展示:
骨架屏:
1、生成骨架屏
生成 .wxml 和 wxss 文件
将这两个文件复制到vscode中,转成组件
2、转成vue组件
留下需要处理的部分
处理报错:
3、显示骨架屏
数据是否正在加载中?是就显示骨架屏,不是就显示正常组件(页面)
数据加载完成,正常显示页面