mip-fixed 懸浮佈局

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

#範例

頂部懸浮

規則：寬度預設螢幕100%，高度最多85像素

<mip-fixed type="top">
    自定义内容，可以嵌套其他组件
</mip-fixed>

底部懸浮

規則：寬度預設螢幕100%，高度最多85像素

<mip-fixed type="bottom">
    自定义内容，可以嵌套其他组件
</mip-fixed>

左側懸浮

#規則：寬度不超過螢幕10%，高度不超過螢幕25%，屬性bottom 或top 必須有一個

<mip-fixed type="left" bottom="50px">
    自定义内容，可以嵌套其他组件
</mip-fixed>

右側懸浮

規則：寬度不超過螢幕10%，高度不超過螢幕25%，屬性bottom 或top 必須有一個

<mip-fixed type="right" top="50px">
    自定义内容，可以嵌套其他组件
</mip-fixed>

支援mip-gototop

<mip-fixed type="gototop">
    <mip-gototop></mip-gototop>
</mip-fixed>

關閉懸浮元素的方法

1、為mip-fixed 標籤新增一個自訂的id：customid

2、為需要點選關閉懸浮元素的標籤新增屬性on="tap:customid.close"

<mip-fixed type="top" id="customid">
  <div>我是顶部的fixed</div>
  <div on="tap:customid.close">我是关闭按钮</div>
</mip-fixed>

屬性

##type

說明：懸浮類型

必選項：是
類型：字串
取值範圍：top/bottom/right/left

top

#說明：距離螢幕頂部距離

必選項: 否
類型：字串
取值範圍：數值+單位，例如：50(px|em|rem|vh|vw|vmin|vmax|cm| mm|q|in|pc|pt)
預設值：auto

bottom

#說明：距離螢幕底部距離

必選項: 否
取值範圍：數值+單位，例如：50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)
預設值：auto

注意事項

懸浮類型

• type為top、bottom 類別不需要新增屬性：top/bottom;

• type為left、 right 類別需要至少增加一個top/bottom屬性，優先用bottom。

• type為 gototop 類別不需要任何屬性。

fixed 元素個數限制

• #top <= 1

• bottom <= 1

• left + right <= 1

• gototop <= 1