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

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

h5 ellipsis.gif

 

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

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

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

 

h5 ellipsis has no overflow.jpg

我们再看看js:

发表评论

必填项已用*标注