MIP 组件支持的各种布局，可以让图片屏幕自适应、定高等。用于预先给组件确定占位，防止组件内容加载后撑开页面，造成页面内容抖动，浏览器重排重绘，简称为 layout 。

支持的布局种类

类别 强制 width 强制 height 详细说明
responsive 是 是 能够根据 width、height 的值，算出元素对应的比例，在不同屏幕宽度上做自适应，非常适合图片、视频等需要大小自适应的组件
fixed-height 否 是 元素的高度固定，width 缺省或者取值为 auto ，比较适合 mip-carousel
fixed 是 是 元素根据 width 和 height 固定高宽，不随屏幕宽度变化
flex-item 否 否 元素通过 flex 进行布局，需设置父元素为 display: flex
fill 否 否 元素的大小根据父节点的大小自动撑开
container 否 否 元素的高度由子节点高度决定，相当于 display: block
nodisplay 否 否 元素不展现，即 display: none ，这种元素可由用户点击触发显示，也可以应用于统计组件

使用方法

MIP 元素添加属性 layout，取值参照上面的种类，如：

  1. <mip-img
  2.     layout="responsive"
  3.     width="350"
  4.     height="263"
  5.     src="/doc/image/layout/img.jpg">
  6. </mip-img>

layout 详解

1. responsive

  • 布局介绍：使用 layout="responsive" 的组件能够根据 width、height 的值，算出元素对应的比例，在不同屏幕宽度上做自适应。
  • 适用场景：图片、视频、图片轮播等需要按比例自动缩放的元素。

  • 代码示例：

    1. <mip-img
    2.   layout="responsive"
    3.   width="350"
    4.   height="263"
    5.   src="/doc/image/layout/img.jpg">
    6. </mip-img>
  • 使用效果：

2. fixed-height

  • 布局介绍：使用 layout="fixed-height" 的组件高度固定，不随屏幕大小变化。width 缺省或者取值为 auto 。
  • 适用场景：高度固定的广告位、音频播放组件、mip-fixed悬浮组件。

  • 代码示例：

    1. <mip-img
    2.   layout="fixed-height"
    3.   height="263"
    4.   src="/doc/image/layout/img.jpg">
    5. </mip-img>
  • 使用效果：

3. fixed

  • 布局介绍：使用 layout="fixed" 的组件宽高固定，根据 width 和 height 取值（px）固定宽高，元素尺寸不随屏幕大小变化。
  • 适用场景：头像图片、表情GIF、后退按钮 等有固定大小的元素。

  • 代码示例：

    1. <mip-img
    2.   layout="fixed"
    3.   width="350"
    4.   height="263"
    5.   src="/doc/image/layout/img.jpg">
    6. </mip-img>
  • 使用效果：

4. flex-item

  • 布局介绍：使用 layout="flex-item" 的组件通过 flex 进行布局，需设置父元素为 display: flex ，元素的大小根据父节点的大小自动撑开。
  • 适用场景：多图横向排列，左右内容对比布局。

  • 代码示例：

    1. <style>
    2.   #container {
    3.       display: flex;
    4.       height: 200px;
    5.   }
    6. </style>
    7. <section id="container">
    8.   <mip-img layout="flex-item" src="/doc/image/layout/img.jpg"></mip-img>
    9.   <mip-img layout="flex-item" src="/doc/image/layout/img.jpg"></mip-img>
    10.   <mip-img layout="flex-item" src="/doc/image/layout/img.jpg"></mip-img>
    11. </section>
  • 使用效果：

5. fill

  • 布局介绍：使用 layout="fill" 的元素的大小根据父节点的大小自动撑开。
  • 适用场景：铺满父元素的背景图片。

  • 代码示例：

    1. <style>
    2.   .container {
    3.       position: relative;
    4.       height: 300px;
    5.       width: 80%;
    6.   }
    7. </style>
    8. <section class="container">
    9.   <mip-img
    10.       layout="fill"
    11.       src="img.jpg">
    12.   </mip-img>
    13. </section>
  • 使用效果：

6. container

  • 布局介绍：使用 layout="container" 的元素的大小根据子节点的大小自动撑开，相当于 display: block 。
  • 适用场景：内容高度不固定的表单，无限滚动组件。

  • 代码示例：

    1. <mip-history history="go, -1" layout="container">
    2.   我说你是人间的四月天；笑声点亮了四面风；轻灵在春的光艳中交舞着变。你是四月早天里的云烟，黄昏吹着风的软，星子在无意中闪，细雨点洒在花前。那轻，那娉婷，你是，鲜妍百花的冠冕你戴着，你是天真，庄严，你是夜夜的月圆。
    3. </mip-history>
    4. <script src="https://c.mipcdn.com/static/v1/mip-history/mip-history.js"></script>
  • 使用效果：

7. nodisplay

  • 布局介绍：使用 layout="nodisplay" 的元素不展现，即 display: none 。隐藏元素可由用户点击触发显示，也可以应用于统计组件。
  • 适用场景：不需要显示在页面上的mip-pix统计、mip-analytics统计、百度统计组件，由用户点击触发的mip-lightbox弹框组件。

  • 代码示例：

    1. <button on="tap:L1.toggle" id="btn-open" class="lightbox-btn">
    2.   打开弹层
    3. </button>
    4. <mip-lightbox layout="nodisplay" class="mip-hidden" id="L1">
    5.   <div class="lightbox">
    6.       <span on="tap:L1.toggle" class="lightbox-btn">关闭弹层</span>
    7.   </div>
    8. </mip-lightbox>
  • 使用效果：

layout 属性缺省规则

width height 其他属性 默认布局
有 有 无 fixed
有 有 存在 sizes 参数 responsive
无或取值为 auto 有 无 fixed-height
无 无 无 container

layout 默认值

所有 MIP 元素都会有 layout 。移动端的设计大部分是块状的，默认的 layout 是 container 。如果有其它的样式需求，如 inline、inline-block。可通过 CSS 样式覆盖的方式修改元素 display 属性。