需求
需要解决的问题
如何解决?
- 箭头方向的变化是一个点击事件bindtap,点击后更换小图标;
- 文本变化是一个show或者hide的事情,折叠的时候有个多行文本溢出得问题五个属性(display: -webkit-Box,-webkit-Box-orient: vertical, -webkit-line-clamp,text-overflow,overflow)
- 状态与数据绑定控制样式
具体实现
wxml
wxss
Box;/*关键属性*/
font-size:28rpx;
color:#cfcfd0;
line-height: 40rpx;
word-break: break-all;
-webkit-Box-orient: vertical;/* 关键属性 */
-webkit-line-clamp:6;/* 关键属性 */
overflow: hidden;/* 关键属性 */
text-overflow:ellipsis;/* 超出内容显示省略号*/
}
.hide{
display: -webkit-Box;
}
.show{
display: block;
}
.arrow{
position: absolute;
width: 40rpx;
height: 43rpx;
left: 50%;
transform: translate(-50%);
}
js
总结
以上所述是小编给大家介绍的微信小程序折叠与展开文章的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。