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

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

h5 ellipsis.gif

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

<view class='bg-white marginTop10 vertical'>
  <text'pay-hint-tille'>挂号支付须知</text>
 1.
'bg-white-ellipsis'bindtap'ellipsis'>
src"{{ellipsis?'../images/ellipsis.png':'../images/unellipsis.png'}}"></image>
</view>

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

.pay-hintcontent{
right%;
  fontsize13px;
  display webkitbox;
  textoverflow ellipsis;
}
lineclamp:3// 最多显示3行
}
0// 全部显示
}

这里需要注意的有overflow：hidden，如果不设置overflow会是神马效果呢？如下图（可以看到厦航文字后，下面的文字还是显示了，只是未占据控件位置而已）：

h5 ellipsis has no overflow.jpg?

我们再看看js：

Page({
},
   * 收起/展开按钮点击事件
  ellipsisfunction(){  
      ellipsis value

作者：ThinkinLiu?
链接：https://www.jianshu.com/p/f5b42ebe0a1f??

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!