1.给数组的每一项添加是否展开或收起的标志:‘toggleShowDes’和长度限制的标志:‘ifMore’
/*获取评论列表*/
getComment: function(flag){
var m = this;
if (!flag) {
m.conmontShow = false;
}
$.get('/subject/getComment',{id:m.topicItem.questionId,page:1},function(ret){
if (ret.errCode==0){
m.conmontShow = true;
var arr = ret.data.lists;
arr.forEach(function (v, i) {
if ($.inArray(zhentiListVm.userId, v.pointOfPraiseRecord) < 0) {
v.fabulous = false;
} else {
v.fabulous = true;
};
v.toggleShowDes = false;
v.ifMore=false;
});
setTimeout(function () {
$('.intro').each(function (i, v) {
if (arr[i].content.length > 44) {
console.log(123)
arr[i].ifMore=true
} else {
arr[i].ifMore=false;
console.log(456)
}
})
});
zhentiListVm.commentLists = arr;
zhentiListVm.userInfo = ret.data.users;
}else{
console.log(ret)
}
},'json')
},
2.根据内容判断状态
<div class="reply-comtent marginmain" v-if="item.toggleShowDes" :index="comIndex">
[[ item.content ]]
<div class="flex flex-align-center height4" @click="spread(item,comIndex,false)">
<div class="more-operation collect flex flex-align-center ">
<span>收起全部</span>
<img class="retract" src="/images/wrong/down.png" alt="" width="" height="">
</div>
</div>
</div>
<!--省略介绍-->
<div class="relative intro-wrap1 reply-comtent marginmain" v-else :index="comIndex">
<p :class="'font-text-shallow'+' '+ 'intro' + ' '+ (item.ifMore == true?'des1':'')">
[[ item.content ]]
</p>
<div class="flex flex-align-center height4" v-if="item.ifMore && !item.toggleShowDes" @click="spread(item,comIndex,true)">
<div class="more-operation open flex flex-align-center ">
<span>展开全部</span>
<img class="" src="/images/wrong/down.png" alt="" width="" height="">
</div>
</div>
</div>
3.点击展开和收起的函数
/*简介展开*/
spread: function (item,index,targetState) {
console.log(index)
var self = this;
if(targetState) {
self.commentLists.forEach(function (v, i) {
console.log(i);
v.toggleShowDes=(i== index);
});
}else{
item.toggleShowDes=false;
}
}
4.css样式
.des1, .des2 {
position: relative;
}
.des1 {
word-break: break-all;
height: .66rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.height4{height: .4rem}
.absolut{position: absolute}
/*.mores {
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
height: .66rem;
left: 0;
bottom: 0;
}*/
.more-operation-collect{
position: absolute;
height: 0.66rem;
color: #1facfc;
right: 12px;
}
.more-operation {
position: absolute;
height: 0.66rem;
color: #1facfc;
right: 12px;
/*padding-right: 127px;*/
}
.collect{ bottom: 2px;}
.open{ bottom: -12px;}
.more-operation span {
margin-right: 6px;
}
.retract {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}