您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2018-08-15 13:48:58
  • 来源:  
  • 栏目:解决方案

导语: 间隔了几个月,又被拉来做小程序了~~~ 页面中有一段说明文字,要求默认收起,只展示3行;点击按钮可以查看完整内容。看

 

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

04.gif

h5 ellipsis.gif

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

05.jpg

h5 ellipsis has no overflow.jpg 


我们再看看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. },



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部