微信小程序里的“展开收起”功能，看起来是个小交互，但很多开发者做出来后，用户反馈要么卡顿、要么逻辑混乱、要么在真机上点不动。今天咱们就把这个功能彻底拆开，从基础实现到进阶优化，像手把手教徒弟一样，把坑都填平。

一、最基础的展开收起：用数据驱动视图

别急着写CSS动画，先搞清楚小程序的“数据驱动”思维。在.js文件里定义一个布尔值，比如isExpand: false，然后在.wxml里用wx:if或hidden控制内容显示。会问：“用wx:if还是hidden？” 这里有个关键区别：wx:if会彻底销毁和重建节点，适合频繁切换但内容轻量的场景；hidden只是隐藏（display:none），节点始终存在，适合内容重、切换不频繁的场景。举个例子，如果你的展开区域包含图片或长列表，用hidden能避免反复渲染导致的闪烁。

代码长这样：

<view bindtap="toggleExpand">{{isExpand ? '收起' : '展开'}}</view>
<view hidden="{{!isExpand}}">这里是隐藏的内容...</view>

然后在.js里：
toggleExpand() {
this.setData({ isExpand: !this.data.isExpand })
}

这步看似简单，但有个坑：如果内容高度不固定，直接切换hidden会出现内容“突然弹出”的视觉跳跃。怎么解决？往下看。

二、让展开收起有平滑动画：高度过渡的实现

小程序里没有像CSS的height: auto配合transition的完美方案（因为小程序不支持auto值的过渡）。常见的做法是“定高过渡”——把内容高度写死，比如height: 0到height: 200rpx，但这样一旦内容变化就得改代码，不灵活。

更好的方案是“动态获取内容高度”。在展开前，用wx.createSelectorQuery()获取内容区域的实际高度，然后赋值给一个变量，再配合transition动画。步骤拆解如下：

1. 在.wxml里，把内容区域包在一个view里，并设置style="height: {{contentHeight}}px; overflow: hidden; transition: height 0.3s;"。
2. 点击展开时，先获取内容高度：
const query = wx.createSelectorQuery()
query.select('.content-wrap').boundingClientRect()
query.exec((res) => {
const height = res[0].height
this.setData({ contentHeight: height })
})
3. 收起时直接把contentHeight设为0。

注意：这里有个容易忽略的细节——内容区域初始状态必须是隐藏的（比如contentHeight: 0），否则获取高度时用户会看到内容一闪而过。另外，如果内容里包含图片，图片加载前高度是0，会导致获取的高度不准确。解决办法：在图片加载完成（bindload事件）后再重新计算高度，或者给图片设置固定宽高比。

三、复杂场景：手风琴式展开与互斥逻辑

很多页面会有多个展开项，比如常见的问题列表、商品规格选择。如果用户点了A展开，再点B，A应该自动收起。这种互斥逻辑，新手容易写出一堆if-else，其实有个简洁做法：用一个变量currentIndex记录当前展开项的索引，点击时判断：如果点击的是同一个索引，就收起（设为null）；如果是不同的，就切换成新索引。

代码示例：
toggleItem(index) {
const current = this.data.currentIndex
this.setData({
currentIndex: current === index ? null : index
})
}

然后在.wxml里用currentIndex === index控制每个项的展开状态。这种写法比用数组存储状态更轻量，而且避免了遍历操作。

四、真机兼容性：那些让你抓狂的bug

1. iOS上动画卡顿：如果用height做动画，在iOS上经常有掉帧现象。替代方案是用transform: translateY配合scaleY来模拟高度变化（比如把内容区域放在一个容器里，缩放容器的高度），虽然逻辑复杂一点，但性能更流畅。
2. 点击事件穿透：当内容区域在收起状态时，如果它上面覆盖了其他可点击元素，事件可能会被错误触发。解决办法是在收起状态下给内容区域加pointer-events: none，或者在hidden状态下用wx:if彻底移除节点。
3. 快速点击导致状态错乱：用户连续点展开收起，可能因为动画未完成导致高度计算错误。可以用一个锁变量isAnimating来控制，动画执行期间禁止再次触发点击。

五、扩展：结合数据缓存与SEO优化

如果你的小程序页面需要被搜索引擎收录（比如微信搜索），展开收起的内容默认是隐藏的，搜索引擎可能抓取不到。解决方案：在onLoad时，把需要展示的摘要内容放在隐藏区域之外，用text-overflow: ellipsis截断，点击展开后再显示完整内容。这样既保证了SEO，又实现了交互。

另外，如果展开的内容是动态加载的（比如用户点击“查看更多”后才请求接口），记得在收起时取消未完成的请求，避免内存泄漏。可以在onHide或页面卸载时调用abort方法。

六、一个容易被忽略的细节：无障碍访问

虽然小程序不像网页那样强调WCAG标准，但为了照顾使用屏幕阅读器的用户（比如视障人士），建议给展开收起按钮加上aria-expanded属性（小程序支持aria-*属性），并动态更新其值。同时，按钮的文本不要只用“展开/收起”，最好加上描述，比如“展开商品详情”、“收起帮助说明”，这样读屏软件能更清晰地传达功能。

最后提醒一下：不要为了炫技而过度使用动画。如果展开内容只是几行文字，直接用hidden切换就够，加动画反而让用户觉得拖沓。好的交互是让用户感觉不到“交互”的存在——内容该出现时就出现，该消失时就消失，自然得像呼吸一样。