2020/9/27 0:00:00
泉源:不详
作者:未知
小程序若是页面中有一段说明文字,,要求默认收起,,只展示3行;;点击按钮可以审查完整内容。。。那么要怎样实现,,以下就为各人解答

微信小程序实现text文本的睁开与收起
先看看结构文件,,要害在与{{ellipsis?'ellipsis':'unellipsis'}},,样式凭证js中的ellipsis改变。。。
-
<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>
接下来看下css,,其他的css都是通例设置,,不需要看,, 我们看下pay-hint-content及后面的ellipsis与unellipsis:
-
.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:3; // 最多显示3行
-
opacity: 0.75 // 透明度75%
-
}
-
.unellipsis{
-
-webkit-line-clamp:0; // 所有显示
-
opacity: 1 // 不透明
-
}
这里需要注重的有overflow:hidden
我们再看看js:
-
Page({
-
data: {
-
ellipsis: true, // 文字是否收起,,默认收起
-
},
-
/**
-
* 收起/睁开按钮点击事务
-
*/
-
ellipsis: function () {
-
var value = !this.data.ellipsis;
-
this.setData({
-
ellipsis: value
-
})
-
},
小程序工具提供多类型商城/门店小程序制作,,可视化编辑 1秒天生5步上线。。。通过拖拽、拼接??榻峁剐〕绦蛏坛且趁,,所看即所得,,只需要美工就能做出细腻商城。。。更多小程序市肆请审查:小程序市肆
【本站声明】
1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,由于未联系到知识产权人或未发明有关知识产权的挂号,,若有知识产权人并不肯意我们使用,,若是有侵权请连忙联系。。。
2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,仅系客观性形貌,,如您需要相识该类商品/服务详细的资讯,,请您直接与该类商品/服务的提供者联系。。。
KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。KESION 一直通过手艺立异,,提供产品和服务,,助力企业向数字化转型,,通过科技驱动商业刷新,,让商业变得更智慧!