這一篇接着上一篇,上一篇的方法過於複雜。由於需求修改,又改了簡潔的方法
需求1:富文本在收起時,如果有圖片展示“「圖片」”兩個字
需求2:富文本如果沒有圖片時,最多展示2行文字,多於2行顯示省略號,並展示【全部/收起】按鈕
需求2:富文本在展開後,顯示圖片,並展示所有文字。
實現效果圖:
<view class="answer_txt">
<rich-text data-index="{{index}}" class="rich_txt {{item.seeMore?'elips':''}}" nodes="{{item.seeMore?item.describeInfoTxt:item.describeInfo}}"></rich-text>
<view class="more_txt" data-index="{{index}}" wx:if="{{item.seeMore}}" bindtap="toggleHandler">全部</view>
<view class="more_txt" data-index="{{index}}" wx:if="{{!item.seeMore && item.auto}}" bindtap="toggleContent">收起</view>
</view>
.answer_txt .rich_txt{
color: #000;
text-align: justify;
line-height: 26px;
font-family:PingFangSC;
}
.elips{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
//取數據之類的就沒有寫了-----
if(res.data.data.list.length>0){
for (let i = 0; i < res.data.data.list.length; i++) {
const ele = res.data.data.list[i];
if(ele.describeInfo!==''){
ele.describeInfo = ele.describeInfo.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
ele.describeInfoTxt = ele.describeInfo.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,'「圖片」')
}
}
this.setData({
answer:res.data.data.list
})
const query = wx.createSelectorQuery();
query.selectAll('.rich_txt').fields({
size: true,
}).exec(function (res) {
console.log(res[0], '所有節點信息');
let lineHeight = 26; //固定高度值 單位:PX
for (var i = 0; i < res[0].length; i++) {
if ((res[0][i].height / lineHeight) > 2 || that.data.answer[i].describeInfoTxt.indexOf('「圖片」')>=0) {
that.data.answer[i].auto = true;
that.data.answer[i].seeMore = true;
}
}
that.setData({
answer: that.data.answer
})
})
toggleHandler: function (e) {
//展開更多
var that = this;
var index = e.currentTarget.dataset.index;
for (var i = 0; i < that.data.answer.length; i++) {
if (index == i) {
that.data.answer[index].auto = true;
that.data.answer[index].seeMore = false;
}
}
that.setData({
answer: that.data.answer
})
},
toggleContent: function (e) {
//收起更多
var that = this;
var index = e.currentTarget.dataset.index;
for (var i = 0; i < that.data.answer.length; i++) {
if (index == i) {
that.data.answer[index].auto = true;
that.data.answer[index].seeMore = true;
}
}
that.setData({
answer: that.data.answer
})
},