小程序展开和收起组件

小程序展开和收起组件.gif

首先需要把效果还原：

wxml

这里有两个重点的东西，一个是把图片的箭头切换一下，看大括号就可以了，另外一个是把当前div的样式改动一下，让它全部展开。

<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="content {{isShow ? 'on' : ''}}">
        <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'>￥{{tools.tool.toFixed2(orderData.refund_price?orderData.refund_price : 0)}}</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'>￥{{tools.tool.toFixed2(orderData.wait_refund)}}</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'>￥{{tools.tool.toFixed2(goodsAllPrice)}}</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'>￥{{tools.tool.toFixed2(goodsAllPrice)}}</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'>￥{{tools.tool.toFixed2(goodsAllPrice)}}</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;
}

*.js

 data: {
        isShow: false, //控制收起展开
        isShow2: false, //控制收起展开
    },


/*
    * isShow做取反操作
    * */
    toChange: function() {
        let that = this;
        that.setData({
            isShow: !that.data.isShow
        })
    },

写在最后，

写博客还是要有一点点的人文精神撒，不要随便拷点代码上去，然后读者看了，跑起来一个都跑不通，既然要写，那就写个好的东西出来嘛，写个半成品，浪费你写东西的时间，也浪费读者研究的时间，共勉！

升级版： 小程序展开和收起组件2.gif