小程序中的查看全文和收起

废话不多说，直接上代码

1、html

<view class="wrap">
    <view class="{{ showAll? 'limit box' : 'box'}}">
        <view class="{{ showAll? 'unfold' : ''  }}">{{ content }}</view>
        <view class="pack-up" wx:if="{{ !showAll }}" catchtap="foldAll"> 收起 </view>
        <view class="fold-box" wx:if="{{ showAll }}">
            <view class="fold"> {{ content }} </view>
            <view class="more" catchtap="readMore">查看全文</view>
        </view>
    </view>
</view>

2、css

.wrap {
    padding：30rpx  20rpx;
 }
.box {
    position: relative;
    line-height: 40rpx;
    font-size: 14px;
 }
.limit {
    max-height: 80rpx;
    overflow: hidden;
    padding-bottom: 40rpx;
 }
.unfold {
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
 }
.fold-box {
    position: absolute;
    top: 0;
    line-height: 42rpx;
    overflow: hidden;   
}
.fold {
    opacity: 0;
 }
.more {
    position: absolute;
    width: 100%;
    top: 80rpx;
    font-size: 16px;
    color: crimson;
 }
.pack-up {
    font-size: 16px;
    color: green;
 }

3、js

    data: {
          showAll: true,  
          content:'内容'
    }