微信小程序制作折叠面板，点击按钮展开时如何做到下滑显示的效果？

Question

Answer 1

// wxml
<view bindtap="clk">
  <view class="clk">标题</view>
  <view>
    <view wx:key="{{key}}" wx:for="{{arr}}" class="child{{!isShow?' hide':''}}">
      <view class="lis">
        <text>{{item.txt}}</text>
      </view>
    </view>
  </view>
</view>

// wxss
.clk {
  background: Red;
}

.child {
  transition: all .6s ease;
  height: 80rpx; //也可以不定高度auto,不过对动画效果有影响
  opacity:1;
}

.hide {
  height: 0;
  opacity:0;
}

//js
 data: {
    isShow: true,
    arr: [
      {txt: 1},
      {txt: 2},
      {txt: 3}
    ]
  },
 clk() {
    this.setData({
      'isShow': !this.data.isShow
    })
  },