WeChat Mini Programs production folding panel, click the button to expand how to achieve the effect of sliding display?

May.02,2022

// 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
    })
  },
Menu