微信小程序text文本的展开与收起

    技术2022-07-10  160

    wxml中

    <text class="title {{content?'content':'content1'}}">做个心平气和的陌生人,正所谓没有经历,哪来的回忆,你好,陌生人,相逢一笑泯恩仇。有时候,我也会埋怨生活总是波折不断,遇到突如其来奇怪的事、奇怪的人,莫名将自己牵扯其中,明明懒得理会,却又咽不下刹那间的心塞而影响心情,该如何是好。 </text> <view bindtap='content'> <view> <button>{{content?'展开':'收起'}}</button> </view> </view>

    css中

    .title{ margin-left: 5%; margin-right: 5%; font-size: 16px; color: #333; /* 以下四行实现收缩功能 */ display: -webkit-box; -webkit-box-orient:vertical; text-overflow: ellipsis; overflow:hidden; } .content{ /* 最多显示3行 */ -webkit-line-clamp:1; } .content1{ /* 全部显示 */ -webkit-line-clamp:0; }

    js中

    data: { // 文字是否收起,默认收起 content:true }, /** * 收起/展开按钮点击事件 */ content:function(){ // 取反就好 var value = !this.data.content; this.setData({ content: value }) },

    效果图

    Processed: 0.014, SQL: 9