微信小程序 - 文字收缩与展开

微信小程序 - 文字收缩与展开

wxml

 <view class='containers'>
<text class="content {{ellipsis?'ellipsis':'unellipsis'}}">
飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发前二十阿里附近发打发打发是范德萨发放就开了房间爱离开房间爱卡房间爱疯爱疯飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发
</text>
<view bindtap='ellipsis'>
<view>
<button>{{ellipsis?'展开':'收起'}}</button>
</view>
</view>
</view> <!--
1. content view包裹text,一旦超出,使用css(-webkit-line-clamp)样式来控制展开或收缩
2. button按钮绑定一个事件,根据({{ellipsis}}),使之置为true或false来控制展开或收缩
-->

css

 page{
font-size: 30rpx;
} .content {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
} /* 修改列数 */
.ellipsis {
-webkit-line-clamp:;
} /* 展示全部 */
.unellipsis {
-webkit-line-clamp:;
}

js

 let _page;

 Page({
data: {
// 文字是否收起,默认收起
ellipsis: true
},
/**
* 收起/展开按钮点击事件
*/
ellipsis() {
_page = this;
let value = !this.data.ellipsis;
_page.setData({
ellipsis: value
})
}
})

点击下载示例:小程序-文字与收缩

上一篇:对连接到 Azure 中 Linux VM 时出现的问题进行详细的 SSH 故障排除的步骤


下一篇:STL容器读书笔记