先看原来的鸟样
我也不知道当时人家做的时候,是怎么想的,显示不了完整的,用省略号代替正常,但是人家想看详细信息,却死活点不开,是什么鬼?
所以 给我提了一个需求,就是点击详细信息,当前的展开,当点击下一个详细信息,上一条信息关闭,当前的展开,这…不就是排他效果吗?
- 之所以内容显示两行,超出部分隐藏,是因为用了如下代码
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
-
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
-
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
-
text-overflow,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本
- 那现在解决的问题就是,点击一条内容,
展示
详细信息
首先需要一个点击事件,顺道传一个索引进去,为后面信息的唯一性做铺垫
<div class="list" v-for="(inform, index) in informList" :key="index" @click="add(index)">
初始化变量currentSort,将每循环的index的值,赋值给i
data () {
return {
informList: [],
content: false,
currentSort: 0
}
},
add (index) {
this.currentSort = index
this.content = !this.content
}
- 然后怎么做到展开当前信息,高度正好呢? 其实只需要添加一个active(激活状态),高度就不管了。随实际的大小变化
.right .content {
font-size: 26rpx;
color: #999999;
font-weight: 400;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
padding-bottom: 7rpx;
}
.content.active { //点击了查看更多,就高度就不管了。随实际的大小变化
height: auto;
background: #fff;
min-height: 160rpx;
display: flex;
padding-bottom: 8rpx;
}
然后就是该判断,点击当前展开,其他关闭这个效果
<div class="content" :class="{ 'active:content':currentSort === index}">
现在的效果