1. 支付成功后,将会推送排队号;就诊当日可直接前往诊室等待叫号就诊,无需再现场缴费、排队。\n2. 已完成支付挂号费用的用户,_小程序实现文字的展开和收起的方法">
当前位置:   article > 正文

【小程序】文本的展开收缩功能_小程序实现文字的展开和收起的方法

小程序实现文字的展开和收起的方法

一、实现效果

在这里插入图片描述

二、设计思路

1.百变不离其中,第一步是设计出大体的框架,通过修改样式来达到一个文本的收缩效果

2.样式的修改用js来做

通过js来判断是否点击了展开/收缩来修改样式

3.核心部分

.ellipsis{
  -webkit-line-clamp:4; 
  opacity: 0.75 ;
}
.unellipsis{
  -webkit-line-clamp:0; 
  opacity: 1 ;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

其中的 -webkit-line-clamp是用来设置文本显示的行数,当数值为0时将全部显示出来

三、相关代码

1、xml中

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2、CSS中

.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 ;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

3、js中

Page({
  data: {
    ellipsis: true, // 文字是否收起,默认收起
  },
  /**
   * 收起/展开按钮点击事件
   */
  ellipsis: function () {  
    var value = !this.data.ellipsis;
    this.setData({
      ellipsis: value
    }) 
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/77117
推荐阅读