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

小程序如果页面中有一段说明文字，要求默认收起，只展示3行；点击按钮可以查看完整内容。那么要如何实现，以下就为大家解答

先看看布局文件，关键在与{{ellipsis?'ellipsis':'unellipsis'}}，样式根据js中的ellipsis改变。

1. <view class='bg-white marginTop10 vertical'>
2. <text class='pay-hint-tille'>挂号支付须知</text>
3. <text class="pay-hint-content {{ellipsis?'ellipsis':'unellipsis'}}" >1.
4. 支付成功后，将会推送排队号；就诊当日可直接前往诊室等待叫号就诊，无需再现场缴费、排队。\n2. 已完成支付挂号费用的用户，如在就诊前一日取消预约订单，成功申请取消订单后，正常情况下系统将会在7个工作日内自动退费至用户支付账号内。\n3. 订单在正常状态下（非系统故障、非医生临时停诊）被爽约，由于占用了医院号源，此类订单不予以退费。</text>
5. <view class='bg-white-ellipsis' bindtap='ellipsis'>
6. <image class='img-ellipsis' src="https://www.kesion.com/"{{ellipsis?'../images/ellipsis.png':'../images/unellipsis.png'}}"></image>
7. </view>
8. </view>

接下来看下css，其他的css都是常规配置，不需要看， 我们看下pay-hint-content及后面的ellipsis与unellipsis：

1. .pay-hint-content{
2. margin-left: 5%;
3. margin-right: 5%;
4. margin-top: 10px;
5. font-size: 13px;
6. color: #888;
7. display: -webkit-box;
8. -webkit-box-orient:vertical;
9. text-overflow: ellipsis;
10. overflow:hidden; // 通过以上四行实现收缩功能
11. }
12. .ellipsis{
13. -webkit-line-clamp:3; // 最多显示3行
14. opacity: 0.75 // 透明度75%
15. }
16. .unellipsis{
17. -webkit-line-clamp:0; // 全部显示
18. opacity: 1 // 不透明
19. }

这里需要注意的有overflow：hidden

我们再看看js：

1. Page({
2. data: {
3. ellipsis: true, // 文字是否收起，默认收起
4. },
5. /**
6. * 收起/展开按钮点击事件
7. */
8. ellipsis: function () {
9. var value = !this.data.ellipsis;
10. this.setData({
11. ellipsis: value
12. })
13. },

小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店