支持 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ī)則：寬度不超過(guò)屏幕10%，高度不超過(guò)屏幕25%，屬性 bottom 或 top 必須有一個(gè)

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

右側(cè)懸浮

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

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

支持 mip-gototop

<mip-fixed type="gototop">
    <mip-gototop></mip-gototop>
</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

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

top

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

bottom

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

注意事項(xiàng)

懸浮類(lèi)型

• type為top、bottom 類(lèi)別不需要添加屬性：top/bottom；

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

• type為 gototop 類(lèi)別不需要任何屬性。

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

• top <= 1

• bottom <= 1

• left + right <= 1

• gototop <= 1