mip-showmore 用来支持显示更多内容
| 标题 | 内容 |
|---|---|
| 类型 | 通用 |
| 支持布局 | responsive,fixed-height,fill,container,fixed |
| 所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-showmore/mip-showmore.js |
基本示例
<mip-showmore> <div showmorebox> <div>todo//</div> </div> <p showmorebtn> <span class="mip-showmore-btnshow">点击显示</span> <span class="mip-showmore-btnhide">收起</span> </p> </mip-showmore>
功能示例
超出高度隐藏
<mip-showmore maxheight='40' animatetime='.3'> <div showmorebox> <div>todo//</div> </div> <p showmorebtn> <span class="mip-showmore-btnshow">点击显示</span> <span class="mip-showmore-btnhide">收起</span> </p> </mip-showmore>
超出数字截断
<mip-showmore maxlen='10' animatetim='.3'> <div showmorebox> 我是超出数字截断<em> 我是超出数字截断</em>我是超出数字截断<span> 我是超出数字截断</span> 我是超出数字截断 我是超出数字截断 </div> <p showmorebtn> <span class="mip-showmore-btnshow">点击显示</span> <span class="mip-showmore-btnhide">收起</span> </p> </mip-showmore>
属性
maxheight
说明：高度阀值,单位为像素。如果元素高度超出阈值，隐藏超出部分，显示"显示更多按钮"。与maxlen不可同时使用，maxheight优先级大于maxlen
必选项：否
类型：数字
单位：无
默认值：无
使用限制：无
maxlen
说明： 内容字符串超出限制长度则会截断显示省略号，显示"显示更多按钮"。内容截断显示不包括图片显示。不允许多层嵌套，如需要使用多层嵌套，请考虑通过高度解决。
必选项：否
类型：数字
单位：无
默认值：无
使用限制：无
animatetime
说明：展开收起动画时间,只有与maxheight一起使用时生效
必选项：否
类型：数字
单位：无
默认值：无
使用限制：无
showmorebox
说明：内容显示框，即需要隐藏显示的dom,一个mip-showmore内只允许出现一个showmorebox
必选项：是
单位：无
默认值：无
使用限制：无
showmorebtn
说明：显示更多按钮dom,一个mip-showmore内只允许出现一个 showmorebtn
必选项：是
单位：无
默认值：无
使用限制：无