小程序实现文本展开、收起
先在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;
}