mip-fixed 懸浮布局

支持 mip 中的懸浮元素整體使用方案

示例

頂部懸浮

規(guī)則：寬度默認(rèn)屏幕100%，高度最多85像素

<mip-fixed type="top">
    自定義內(nèi)容，可以嵌套其他組件
</mip-fixed>

底部懸浮

規(guī)則：寬度默認(rèn)屏幕100%，高度最多85像素

<mip-fixed type="bottom">
    自定義內(nèi)容，可以嵌套其他組件
</mip-fixed>

左側(cè)懸浮

規(guī)則：寬度不超過屏幕10%，高度不超過屏幕25%，屬性 bottom 或 top 必須有一個(gè)

<mip-fixed type="left" bottom="50px">
    自定義內(nèi)容，可以嵌套其他組件
</mip-fixed>

右側(cè)懸浮

規(guī)則：寬度不超過屏幕10%，高度不超過屏幕25%，屬性 bottom 或 top 必須有一個(gè)

<mip-fixed type="right" top="50px">
    自定義內(nèi)容，可以嵌套其他組件
</mip-fixed>

關(guān)閉懸浮元素的方法

1、給 mip-fixed 標(biāo)簽添加一個(gè)自定義的 id：customid

2、給需要點(diǎn)擊關(guān)閉懸浮元素的標(biāo)簽添加屬性 on="tap:customid.close"

<mip-fixed type="top" id="customid">
  <div>我是頂部的fixed</div>
  <div on="tap:customid.close">我是關(guān)閉按鈕</div>
</mip-fixed>

屬性

type

說明：懸浮類型
必選項(xiàng)：是
類型：字符串
取值范圍：top/bottom/right/left

top

說明：距離屏幕頂部距離
必選項(xiàng): 否
類型：字符串
取值范圍：數(shù)值+單位，例如：50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)
默認(rèn)值：auto

bottom

說明：距離屏幕底部距離
必選項(xiàng): 否
取值范圍：數(shù)值+單位，例如：50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)
默認(rèn)值：auto

注意事項(xiàng)

懸浮類型

• type為top、bottom 類別不需要添加屬性：top/bottom；

• type為left、right 類別需要至少添加一個(gè)top/bottom屬性，優(yōu)先用 bottom。

fixed 元素個(gè)數(shù)限制

• top <= 1

• bottom <= 1

• left + right <= 1