小程序渲染之谜：如何解决“加载中...”不消失的 Bug（glass-easel）
🎉 小程序渲染之谜：如何解决“加载中…”不消失的 Bug 🎉
引言
在小程序开发中，渲染问题总能让人抓狂。😫 这次，我遇到了一个奇怪的 bug：产品详情页的内容已经正常显示，但页面却一直卡在“刷新中…”、“加载中…”、“暂无数据”或底部图片的状态提示上，迟迟不消失。😱 通过一番排查，我最终揪出了问题根源，并成功解决。💪 这篇博客将带你走进这个渲染谜团，分享我的解决过程和经验教训。准备好了吗？让我们一起探索！🚀
🕵️♂️ 问题现象
我在开发小程序产品详情页时，使用了一个自定义组件 <scroll-view-y> 来管理滚动和加载状态。按理说，页面应该在数据加载时显示状态提示，加载完成后自动隐藏。然而，实际情况却是：
- 产品详情内容正常显示：数据请求成功，页面内容渲染无误。
- 状态提示不消失：屏幕上同时显示“刷新中…”、“加载中…”、“暂无数据”或底部图片，像是中了魔咒。
这让我百思不得其解：内容都出来了，为什么状态提示还赖着不走？🤔
🔍 排查过程
为了搞清楚问题，我开始了系统化的排查之旅。以下是我的步骤：
1. 确认内容渲染
我首先检查了数据是否正常获取和渲染。通过控制台，我看到 info 数据已经成功传递给子组件，页面内容也如期显示。👍 这说明问题不在数据请求或内容渲染上，而是状态提示的控制逻辑出了岔子。
2. 分析组件逻辑
接着，我深入研究了 <scroll-view-y> 组件的实现。它的 WXML 使用条件渲染，通过以下状态标志控制显示内容：
refreshFlag为true时显示“刷新中…”loadMoreFlag为true时显示“加载中…”emptyFlag为true时显示“暂无数据”notMoreFlag为true时显示底部图片
理论上，这些标志在数据加载完成后应该被重置为 false，但显然它们没有正确更新。🧐
3. 检查状态重置逻辑
我翻看了组件的 JS 代码，发现状态标志的更新依赖于异步操作（比如 setTimeout）或接口请求的回调。然而，在某些情况下，这些异步逻辑可能未能按预期执行，导致状态未能重置。😓 特别是当项目使用了第三方框架时，异步执行的时机可能出现偏差。
4. 发现 app.json 配置
在排查中，我无意间瞥到了 app.json 中的一行配置：
"componentFramework": "glass-easel"
这是一个第三方组件框架！我灵光一闪，尝试删掉这行配置，重新运行小程序——奇迹发生了！状态提示正常消失，页面恢复正常！😲
🧩 问题根源
经过反复验证，我终于锁定了罪魁祸首：glass-easel 框架与组件代码的兼容性问题。
- 小程序原生框架：默认使用原生组件框架，调用
setData会立即触发视图更新，状态和渲染保持同步。 glass-easel框架：基于虚拟 DOM 的第三方框架，setData的更新时机与原生框架不同，可能导致状态更新后视图未及时刷新。
我的 <scroll-view-y> 组件是为原生框架设计的，依赖 setData 的即时刷新。而 glass-easel 的异步渲染机制打乱了节奏，导致状态更新后视图未能同步，最终页面卡在了“加载中…”等状态。😵
🛠️ 解决方案
找到根源后，解决方法就水到渠成了。我提供了两种方案：
方案一：使用原生框架（推荐）
- 操作：删除
app.json中的"componentFramework": "glass-easel"配置。 - 效果：恢复小程序原生框架，状态与视图同步，状态提示正常消失。
- 适用场景：如果项目不需要
glass-easel的性能优化，这是个简单稳定的选择。
方案二：适配 glass-easel
- 操作：修改组件代码，减少异步操作，确保数据加载后状态强制重置。
- 效果：兼容
glass-easel，状态提示正常控制。 - 适用场景：如果项目必须依赖
glass-easel的特性，可以选择此方案。
最终，我选择了方案一，去掉 glass-easel 后，问题彻底解决！🎉
🧠 排查流程图
为了让你更直观地理解排查过程，我用 Mermaid 画了一个流程图：
🎯 总结
这次 bug 的根源在于 glass-easel 框架与现有代码的不兼容，导致状态更新后视图未能及时刷新。移除 glass-easel，恢复原生框架后，状态提示得以正常控制。💡
技术小贴士：
- 如果小程序页面状态不更新，检查是否引入了第三方框架。
- 异步操作可能导致渲染延迟，尽量确保状态逻辑与视图同步。🛠️
🚀 结语
希望这篇博客能帮你在小程序开发中少走弯路！如果遇到类似问题，或者有其他经验分享，欢迎留言交流。😊 下次再有 bug，我们一起搞定它！
点赞、收藏、分享，让我们在技术路上携手进步！👍
📚 参考资料
- 微信小程序官方文档
- glass-easel 官方文档
🧠 思维导图
最后，我用 Mermaid 绘制了一个思维导图，清晰梳理整个 bug 解决过程：
这个思维导图从问题现象到解决方案一目了然，希望能帮你快速回顾整个过程。😄
