1. 支付成功后,将会推送排队号;就诊当日可直接前往诊室等待叫号就诊,无需再现场缴费、排队。\n2. 已完成支付挂号费用的用户,_小程序实现文字的展开和收起的方法">
赞
踩
通过js来判断是否点击了展开/收缩来修改样式
.ellipsis{
-webkit-line-clamp:4;
opacity: 0.75 ;
}
.unellipsis{
-webkit-line-clamp:0;
opacity: 1 ;
}
其中的 -webkit-line-clamp是用来设置文本显示的行数,当数值为0时将全部显示出来
<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'>
<text wx:if="{{ellipsis==true}}">展开</text>
<text wx:if="{{ellipsis==false}}">收缩</text>
</view>
</view>
.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; opacity: 0.75 ; } .unellipsis{ -webkit-line-clamp:0; opacity: 1 ; }
Page({
data: {
ellipsis: true, // 文字是否收起,默认收起
},
/**
* 收起/展开按钮点击事件
*/
ellipsis: function () {
var value = !this.data.ellipsis;
this.setData({
ellipsis: value
})
}
})
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。