vue实现动画效果展开与收起,vue 列表菜单展开收起
本文主要详细介绍了Vue的文本展开和折叠功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue实现文字展开和折叠功能的具体代码，供大家参考。具体内容如下
先说需求和要实现的需求。
1.移动端H5，发布消息后跳转到评论列表，文字超过5行，超出部分需要隐藏，需要有展开/折叠按钮。
2.对于不超过5行的单词，不需要显示展开和折叠/按钮。
直接把核心代码放在下面。
div :ref=`community_${index} `
社区词汇
:class= { more-line :item . DOM height 300！item.open}
v-html= content html(item . content)
/div
span class=切换-折叠
v-show=item.domHeight 300
@click=toggleFoldFn(item，index)
{{ item.open？折叠:展开 }}
/span
实现思路：数据采集后，先渲染页面，然后计算渲染dom元素的高度，动态添加类，设置多余样式，显示展开和折叠按钮。目前是移动端h5，流畅度符合正常要求！下面说说具体细节：
div显示文本内容。这里文本的行高固定为60px，所以5行以上的行高为300px。这里以300作为判断条件，可以根据实际情况进行修改。开放字段是展开和折叠的，默认为false。我们来看看具体的js代码。
apiQueryCommentsList(数据)。然后((res)={
if(res.data res.data.length){
this . community list=RES . data；
这个。$nextTick(()={
for(设k=0；k this . community list . length；k ){
const domHeight=this。$refs[`community_${k}`][0]。偏高；
const open=domHeight 300？真：假；
这个。$set(this.communityList[k]， domHeight ，DOM height)；
这个。$set(this.communityList[k]， open ，open)；
}
});
}否则{
this . community list=[]；
}
});
获取数据后，先渲染，再获取dom高度。通过$set为每个数据添加domHeight属性和open属性。open属性也将用于展开和折叠功能。接下来看扩展和折叠功能。
toggleFoldFn(item){
//点击iOS下的展开，记录滚动条位置，点击折叠，返回展开位置。
如果(！item.open){
this . scoll top=document . document element . scroll top document . body . scroll top；
}否则{
const ua=window . navigator . user agent . tolocalelowercase()；
const isIOS=/iphoneipadipod/。测试(ua)；
if(this.scollTop！==空isIOS
window.scrollTo(0，this . scoll top)；
}
}
item.open=！item.open
}
item.open=！item.open这个代码可以实现展开和折叠的功能。其他代码用于解决ios上展开和折叠后滚动条位置变化的问题。上面的代码可以完成展开和折叠的功能！
替换换行符：
contentHtml(内容){
return content.replace(/\n/g， br/)；
}
在下面张贴css代码。社区-单词{
字体大小：32px
字体系列：方平SC；
字体粗细：400；
行高：60px
颜色：rgba(6，15，38，1)；
自动换行：断字；
断字：正常；
}。更多行{
断字：全断；
文本溢出：省略号；
显示：-WebKit-box；
-webkit-box-orient:垂直；
-WebKit-line-clamp:5；
溢出：隐藏；
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。