text文本的展开与收起

面中有一段说明文字，要求默认收起，只展示3行；点击按钮可以查看完整内容。

 

wxml

<view class='bg-white marginTop10 vertical'>

<text class='pay-hint-tille'>挂号支付须知</text>

<text class="pay-hint-content {{ellipsis?'ellipsis':'unellipsis'}}" >1.

支付成功后，将会推送排队号；就诊当日可直接前往诊室等待叫号就诊，无需再现场缴费、排队。\n2. 已完成支付挂号费用的用户，如在就诊前一日取消预约订单，成功申请取消订单后，正常情况下系统将会在7个工作日内自动退费至用户支付账号内。\n3. 订单在正常状态下（非系统故障、非医生临时停诊）被爽约，由于占用了医院号源，此类订单不予以退费。</text>

<view class='bg-white-ellipsis' bindtap='ellipsis'>

<image class='img-ellipsis' src="{{ellipsis?'../../images/ellipsis.png':'../../images/unellipsis.png'}}"></image>

</view>

</view>

Page({

data: {

items: mock,

 

ellipsis: true, // 文字是否收起，默认收起

},

 

js/**

* 收起/展开按钮点击事件

*/

ellipsis: function () {

var value = !this.data.ellipsis;

this.setData({

ellipsis: value

})

},

 

wxss

.pay-hint-content{

margin-left: 5%;

margin-right: 5%;

margin-top: 10px;

font-size: 13px;

color: #888;

display: -webkit-box;

-webkit-box-orient:vertical;

text-overflow: ellipsis;

overflow:hidden;

/* // 通过以上四行实现收缩功能 */

}

.ellipsis{

-webkit-line-clamp:4;

/* // 最多显示3行 */

opacity: 0.75

/* // 透明度75% */

}

.unellipsis{

-webkit-line-clamp:0;

/* // 全部显示 */

opacity: 1

/* // 不透明 */

}