⼩程序实现折叠与展开⽂章功能
需求
页⾯折叠超出的的部分显⽰省略号，点击展开后显⽰全部内容
需要解决的问题
箭头随展开折叠后箭头⽅向的变化
当点击箭头⽂本显⽰内容的变化
如何解决？
箭头⽅向的变化是⼀个点击事件bindtap，点击后更换⼩图标；
⽂本变化是⼀个show或者hide的事情，折叠的时候有个多⾏⽂本溢出得问题五个属性（display: -webkit-box，-webkit-box-orient: vertical， -webkit-line-clamp，text-overflow，overflow）
状态与数据绑定控制样式
具体实现
wxml
<view class="company-detail">
<view class="company-detail-content">
<view class="weui-loadmore weui-loadmore_line">
<view class="weui-loadmore__tips weui-loadmore__tips_in-line">公司介绍</view>
</view>
<view class="long-dec {{isFold?'hide':'show'}}">
<text class="first-dec">
创业是个失败概率很⼤的事情，我们很⾼兴从2012底到现在还活着，⽽且还活的很不错。⽬前有赞旗下的产品有：有赞微商城、有赞收银、有赞零售、有赞美业、有赞批发、有赞买家版、有赞微⼩店.
</text>
<text class="second-dec">
我们认为，相⽐较业务来说，团队才是公司的核⼼。有赞没有“员⼯”只有“⼩伙伴”，也没有⼈姓“公”名“司”，我们有⼀聪明、有要性、⼜⽪实的伙伴，这才是我们最⼤的资产。
</text>
<text class="last-dec">
有赞的⼩伙伴⽬前已超过1000⼈，⼯程师⽐例占55%，我们有很浓的⼯程师氛围，每周都有很多的有意思的分享：有出国旅游的分享、有如何搭讪的分享、有如何装修房⼦的分享...技术分享更是数不胜数。我们的⼯作不是很轻松，但我们的氛围很轻松，很o        </text>
</view>
<image class="arrow" src=" {{isFold?'../../youzan-image/down.png':'../../youzan-image/up.png'}}" bindtap="showAll"></image>
</view>
</view>
wxss
.long-dec{
padding-left: 20rpx;
margin-top: -87rpx;
display: -webkit-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
Page({
data: {
isFold: true,
},
showAll: function (e) {
this.setData({
isFold: !this.data.isFold,
})
}
总结
以上所述是⼩编给⼤家介绍的⼩程序折叠与展开⽂章的实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。