小程序实现文本展开、收起

收起时

展开时

先在data中定义一个布尔值数据，根据他的false和true来判断是否展开收起

文本超出区域显示省略号

text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

动态判断显示图标

<image src="{{open ? '/images/packup.png' : '/images/nearby/select.png'}}" class="synopsis_img"></image>

动态判断是否展开、收起 添加样式

<view class="data_text {{open ? '':'hide3'}}">{{content}}</view>

wxss

.data_text{

   color: var(--place);

   font-size: 26rpx;

   margin-top:16rpx;

}

.hide3 {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

}