小程序展开和收起组件

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

首先需要把效果还原：

wxml

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

    
        支付详情
        
    
    
        
            
                总支付
                ￥{{tools.tool.toFixed2(orderData.refund_price?orderData.refund_price : 0)}}
            
            
                总优惠金额
                ￥{{tools.tool.toFixed2(orderData.wait_refund)}}
            
            
                支付方式
                合计：￥{{tools.tool.toFixed2(goodsAllPrice)}}
            
            
                收银人员
                合计：￥{{tools.tool.toFixed2(goodsAllPrice)}}
            
            
                订单号
                合计：￥{{tools.tool.toFixed2(goodsAllPrice)}}
            

        
    

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