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ī)則:寬度不超過(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