javaee论坛

普通会员

225648

帖子

335

回复

349

积分

楼主
发表于 2019-11-03 06:38:22 | 查看: 315 | 回复: 2

有时候一个列表的文章过长,显示的时候要省略显示,但是还要有一个展开查看全文的点击事件,可以实现展开与折叠。写的粗略,请见谅!

index.js//index.jsPage({data:{motto:'在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个小程序项目,也遇到此情况,就将此顺便总结下来~',isF:true},aa:function(){this.setData({isF:!this.data.isF})}})index.wxml<view><textclass="conts{{isF?'hide':''}}">{{motto}}</text><textbindtap='aa'>{{isF?'展开':'收起'}}</text></view>index.wxss/*文本描述*/.conts{font-size:28rpx;line-height:50rpx;background-color:grey;/*关键属性(必须有的)*/display:-webkit-box;}.hide{/*规定子元素的排列方向*/-webkit-box-orient:vertical;/*限制文本显示的行数*/-webkit-line-clamp:2;/*实现多余的文字隐藏并用省略号来代表被隐藏的文字*/overflow:hidden;text-overflow:ellipsis;}效果

注意:被折叠的文字只能是行内元素,行内块状元素与块状元素不行,

<spanstyle="color:#ff0000;">line-clamp</span>

属性只会计算inline元素的行数!

供参考!


普通会员

0

帖子

327

回复

353

积分
沙发
发表于 2022-05-08 06:02:57

谢谢楼主分享

普通会员

0

帖子

302

回复

311

积分
板凳
发表于 2023-08-27 20:46:35

楼主听话,快到碗里来!

您需要登录后才可以回帖 登录 | 立即注册

触屏版| 电脑版

技术支持 历史网 V2.0 © 2016-2017