小程序展开收起

效果图:

js:

// 获取全局应用程序实例对象
var app = getApp();

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isShow: false, //控制收起展开
    },//控制收起展开
     toChange: function () {
    let that = this;
    that.setData({
      isShow: !that.data.isShow
    })
  },
});

wxml:

<view class="container">
    <view class="title">
        <text class="title_txt">消费详情</text>
        <image class="title_icon" src="{{isShow ? 'https://file.snailpet.cn/23/a4/23a4787efd85b48db2102dcb51735e2c.png' : 'https://file.snailpet.cn/03/ad/03addd057eb67d09feef31894762d7f2.png'}}" bindtap="toChange"/>
    </view>
    <view class="{{isShow? 'on':'content'}}">
        <view class='cost flex-colum lr-padding'>
            <view class='goods-cost flex-row'>
                <text class='cost-title text666-color'>共消费</text>
                <text class='cost-detail tl-color-186 text-r text-over-ell'><!--团满50件应退款--><text class='main-color cost-m tl-color-186'>￥200</text></text>
            </view>
            <view class='goods-cost flex-row'>
                <text class='cost-title text666-color'>优惠金额</text>
                <text class='cost-detail tl-color-186 text-r text-over-ell'><text class='main-color cost-m tl-color-186'>￥50</text></text>
            </view>
            <view class='goods-cost flex-row'>
                <text class='cost-title text666-color'>苹果</text>
                <text class='cost-detail text666-color text-r text-over-ell'>合计：<text class='main-color cost-m tl-color-186'>￥75</text></text>
            </view>
            <view class='goods-cost flex-row'>
                <text class='cost-title text666-color'>香蕉</text>
                <text class='cost-detail text666-color text-r text-over-ell'>合计：<text class='main-color cost-m tl-color-186'>￥75</text></text>
            </view>
        </view>
    </view>
</view>

wxss:

.container .title {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 25rpx;
}
.container .title_txt {
    font-size: 34rpx;
    color: #2b2b2b;
}
.container .title_icon {
    display: block;
    width: 21rpx;
    height: 11rpx;
}

.content{
    height: 80rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 25rpx;
    font-size: 30rpx;
    color: #888888;
}
.on{
    display: block;
    text-overflow: clip;
    overflow: visible;
}