小程序列表点击展开收起利用高度

小程序列表中的展开和收起功能通常通过JavaScript和CSS来实现。当你点击一个列表项时，会动态改变其内容区域的高度。以下是基本步骤：

1. HTML结构：每个列表项包含一个初始隐藏的内容区域（例如`.wx-hide`），用于存储可展开的内容。

<view class="list-item">
  <view class="header">标题</view>
  <view class="content wx-hide" id="expandContent">详细信息...</view>
  <view class="toggle-btn" bindtap="handleToggle">展开/收起</view>
</view>

2. CSS样式：设置初始状态下的内容区域高度为0，以及切换时的显示样式。

.list-item {
  ...
}
.content.wx-hide {
  display: none;
  height: 0;
  overflow: hidden; /* 防止内容超出 */
}

.expand-state .content.wx-hide {
  display: block;
  transition: height 0.3s ease;
}

3. JavaScript处理：当用户点击“展开/收起”按钮时，切换`.content`的`display`属性，并更新内容区的高度。

Page({
  data: {
    expandState: false,
  },
  
  handleToggle: function(e) {
    this.setData({
      expandState: !this.data.expandState
    });
    
    // 动画效果
    const content = this.selectComponent('#expandContent');
    if (this.data.expandState) {
      content.show();
    } else {
      content.hide();
    }
  }
})