微信小程序实现页面折叠展开效果

<!-- index.wxml --><view class="container">  <view class="header" bindtap="toggleFold">    <text>{{fold ? '展开' : '折叠'}}</text>  </view>  <view class="content" style="{{fold ? '' : 'height:0;'}}">    <!-- 折叠内容 -->  </view></view>

// index.jsPage({  data: {    fold: true, // 初始折叠状态为true  },  toggleFold: function() {    this.setData({ fold: !this.data.fold }); // 切换折叠状态  }})

/* index.wxss */.container {  width: 100%;  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;}.header {  width: 100%;  height: 40px;  line-height: 40px;  text-align: center;  background-color: #f0f0f0;  cursor: pointer;}.content {  width: 100%;  background-color: #fff;  overflow: hidden;  transition: height 0.3s;}