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

廢話不多說(shuō),直接上代碼
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:'內(nèi)容'
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容