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

间隔了几个月,又被拉来做小程序了~~~
页面中有一段说明文字,要求默认收起,只展示3行;点击按钮可以查看完整内容。看了下微信文档,没发现有控件满足要求,于是决定通过js实现

9166166-3fda0d03172847aa.gif
h5 ellipsis.gif

先看看布局文件,关键在与{{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,如果不设置overflow会是神马效果呢?如下图(可以看到厦航文字后,下面的文字还是显示了,只是未占据控件位置而已):


9166166-607813b884bc95a5.jpg
h5 ellipsis has no overflow.jpg

原文:简书ThinkinLiu 博客: IT老五
我们再看看js:

Page({
  /**
   * IT老五 http://itlao5.com
   * 简书 https://www.jianshu.com/p/f5b42ebe0a1f
   */ 
  data: {
    ellipsis: true, // 文字是否收起,默认收起
  },
  /**
   * 收起/展开按钮点击事件
   */
  ellipsis: function () {  
    var value = !this.data.ellipsis;
    this.setData({
      ellipsis: value
    }) 
  },
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值