消失的图表#

在微信开发者工具里，ECharts 图表渲染得完美无缺，动画流畅，交互丝滑。我满怀信心地点击上传、发布体验版，掏出手机预览——

图表全都不见了，只有一片空白。

一瞬间心态崩了。明明代码没有任何报错，工具里也正常，怎么真机就“跪”了？我以为是样式问题，开始让 AI 帮忙排查：延迟加载、修改 CSS、调整 Z-index、甚至重写初始化逻辑。折腾了整整3个小时，代码改得面目全非，手机上的图表依然顽固地隐身。

最后实在没办法，我冷静下来，找出了之前一个能正常显示图表的页面，进行逐行代码比对。

终于，我发现了一个关键的区别：正常的页面用的是普通的 <view>，而这个出问题的页面用的是 <scroll-view>。

梦中惊醒。原来，微信小程序的原生组件（Canvas 用于渲染 ECharts）在 <scroll-view> 中存在及其诡异的渲染层级问题，尤其是在安卓和部分 iOS 真机上。这就是图表“消失”的元凶。

我果断把 content wrapper 从 <scroll-view> 换成了 <view> 容器，配合 overflow-y: scroll。重新编译，真机扫码——图表出来了！

翻页的“阵痛”#

图表是显示出来了，但为了实现“年度账单”那种一屏一页的沉浸式体验，我使用了 CSS Scroll Snap (scroll-snap-type: y mandatory)。

结果新的问题又来了：

1. 过于灵敏：手指轻轻一划，页面就像刹不住车一样飞出去好几页。
2. 卡顿尴尬：经常出现“上不去下不来”的情况，页面停在两个页面的中间，上面一半显示图表，下面一半显示文字，体验极差。

我又开始疯狂问 AI 如何优化滚动阻尼和吸附效果，但在小程序里，CSS Scroll Snap 的兼容性和手感总是差点意思。

终极方案：回归 Swiper#

最后，AI 给出了一个“返璞归真”的建议：直接使用微信原生的 <swiper> 组件。

1
<swiper vertical="true" bindchange="onSwiperChange" style="height: 100vh;">
2
  <swiper-item> Page 1 </swiper-item>
3
  <swiper-item> Page 2 </swiper-item>
4
  ...
5
</swiper>

改完之后，世界清静了：

• 强制整页翻动：再也不会卡在半空中，每一页都严丝合缝。
• 自带阻尼：滑动体验丝般顺滑，不再“乱飞”。
• 精准的生命周期：利用 bindchange 事件，我可以精确控制每一页图表的加载时机（翻到这一页再渲染动画），完美解决了图表预加载的性能问题。

总结#

微信小程序的开发，真的是在“坑”里仰望星空。

1. ECharts 慎用 Scroll-View：除非万不得已，能用 view 就别用 scroll-view 包裹 Canvas。
2. 全屏翻页首选 Swiper：不要迷信 CSS 魔法，原生 swiper 组件才是做 H5 翻页效果的王道。

（完）