小程序之下拉展开更多 动画效果

先放效果图

原理：js动态改变列表容器的高度，css加入动画效果，即可实现。

首先，js判断列表长度大于设定值则列表容器高度默认为设定值，我这里1行的高度为140rpx，默认显示两行，则默认高度=142*2。

列表容器：

    is_show_class：作为记录“展开”、“收起”的状态

<view class="class_box" style="height:{{item.is_show_class==0 && item.class.list.length>2?2*142:item.class.list.length*142}}rpx">

.class_box{
  width: 100%;
  transition: height 0.3s;
  overflow: hidden;
}

更多按钮：

    给图标“下箭头”做个判断，展开时添加一个类，用于旋转图标

    html:

<view class="train_bottom_line3" catchtap="showMoreClass" data-index="{{index}}" wx:if="{{item.class.list.length>show_class_num}}">
    <image class="more_icon {{item.is_show_class==1&&'more_icon_rotate'}}" src="{{__IMAGE_PATH__}}/train/jiantou_down.png"></image>
    <view class="more" wx:if="{{item.is_show_class==1}}">收起</view>
    <view class="more" wx:else>更多 {{item.class.count-show_class_num}} 个课程</view>
</view>

    css:

.train_bottom_line3 .more_icon{
  width: 50rpx;
  height: 50rpx;
  transition: transform 0.3s;
}
.train_bottom_line3 .more_icon_rotate{
  transform: rotate(180deg);
}