参考文章
1、微信小程序文本展开、收起功能
2、微信小程序文字超过行后隐藏并且显示省略号
需求描述
显示消息内容,超出两行部分隐藏。当有隐藏内容时,该卡片设为可点击,进入消息详情页面。
代码
1、wxml
<view class="message_content_bottom" bindtap="{{isOpen ? 'openMessageDetail' : '' }}>
<!--这里一定要是text!!!!!!!!!!!!!!!-->
<text class="content_bottom">{{content}}</text>
</view>
2、wxss文章来源:https://www.toymoban.com/news/detail-549535.html
.message_content_bottom{
width: 100%;
font-size: 14px;
/*以下内容是文字隐藏所必须的*/
display: -webkit-box;
word-break: break-all;/*换行规则*/
text-overflow: ellipsis;/*最后使用省略号显示*/
overflow: hidden;/*超出部分隐藏*/
-webkit-box-orient: vertical;
-webkit-line-clamp:2;/*能够显示几行*/
line-height: 20px; /*行高,固定写死。后续将会使用它*/
}
3、.js文章来源地址https://www.toymoban.com/news/detail-549535.html
Page({
/**
* 页面的初始数据
*/
data: {
content:"嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟",
//记录是否可点击
isOpen:false
},
//主要部分:对消息进行处理-超过两行显示时,可以点击进入查看详情页面
hidenMore(type) {
let that = this;
let isOpen = false;
const query = wx.createSelectorQuery();
query.selectAll('.content_bottom').fields({
size: true,
}).exec(function (res) {
let ress = res[0];
let lineHeight = 20 //样式中写死的行高,单位px
for (let i = 0; i < ress.length; i++) {
if (ress[i].height / lineHeight > 2) {
isOpen = true;
}
}
that.setData({
isOpen : isOpen
})
})
},
})
到了这里,关于微信小程序-控制文本的显示及隐藏(当文字超出两行时,设置为可点击并进入查看详情页面)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!