微信小程序微信小程序 多行文本显示多行文本显示...+显示更多按钮和收起更多按钮功能显示更多按钮和收起更多按钮功能
主要介绍了微信小程序多行文本显示...+显示更多按钮和收起更多按钮,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
看了很多帖子，但是效果都不是很好。还是找微信小程序官方文档，自己写比较方便。自己动手丰衣足食！话不多说，上代码！
时空传送
先来个效果图
1212
html
<block wx:for='{{trendsList}}' wx:key='index'>
<view class="box">
<view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view>
<view class="text_toggle_box" wx:if='{{item.seeMore}}' data-index='{{index}}' catchtap='toggleHandler'>
<text class="text_toggle_text">查看更多</text>
<image class="toggle-icon" src="../../images/1.png"></image>
</view>
<view class="text_toggle_box" wx:if='{{!item.seeMore && item.auto}}' data-index='{{index}}' catchtap='toggleContent'>
<text class="text_toggle_text">收起</text>
<image class="toggle-icon" src="../../images/2.png"></image>
</view>
</view>
</block>
wxss
.box{
margin: 40rpx 32rpx;
}
.text_box{
width: 100%;
font-size: 30rpx;
font-weight: 400;
color: rgba(87,105,123,1);
line-height: 48rpx;
}
.textFour_box{
width: 100%;
font-size: 30rpx;
font-weight: 400;
color: rgba(87,105,123,1);
line-height: 26px;
text-align: justify;
}
.toggle-icon {
width: 25rpx;
height: 25rpx;
}
.text_toggloe_box{
display: -webkit-box;
display: -webkit-flex;
flex-direction: row;
align-items: center;
margin: 10rpx 0;
}
.text_toggle_text{
font-size: 24rpx;
color: #333;
line-height: 32rpx;
margin-right: 10rpx;
}
.three{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
js
var index;
Page({
/**
* 页面的初始数据
*/
评论0