MIP个性化组件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
必选项:是
单位:无
默认值:无
使用限制:无


发布日期:

所属分类: 网站运营 SEO 标签: