更新记录
1.0.9(2023-03-16)
下载此版本
修复h5端,定位会超出navabr,tabbar页面问题
1.0.8(2023-03-05)
下载此版本
新增hideside,hideside方法,修复特殊情况下弹窗无法覆盖问题
1.0.7(2023-02-22)
下载此版本
新增fill属性
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.2.15 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
m-wrap布局容器
有些时候我们需要一些特殊的布局,比如tab永远固定在页面顶部,确认按钮永远固定在页面底部,m-wrap
可以一个组件解决所有问题,只需要传入slot,就可以自动布局,自动规避安全底部
使用方式
<template>
<m-wrap ref="wrapRef" bg-color="#F5F5F5" footer-bg-color="#fff">
<template #header>
<view>此处内容永远固定在页面头部</view>
</template>
<template #mask>
<view>此处内容为遮罩层展示内容(此内容距离顶部永远是header的高度)</view>
</template>
<view>页面内容</view>
<template #footer>
<view>此处内容永远固定在页面底部</view>
</template>
</m-wrap>
</template>
Props
属性名 |
类型 |
默认值 |
必填 |
说明 |
bgColor |
String |
transparent |
否 |
容器背景颜色 |
headerBgColor |
String |
transparent |
否 |
头部插槽背景颜色 |
footerBgColor |
String |
transparent |
否 |
脚部插槽背景颜色 |
shadeColor |
String |
rgba(0,0,0,0.6) |
否 |
遮罩层背景颜色 |
fill |
Boolean |
false |
否 |
内容是否填充界面 |
Events
名称 |
说明 |
maskShow |
mask显示成功 |
maskHide |
mask隐藏成功 |
hideSide |
隐藏头部或脚部,接受参数header,footer |
showSide |
显示头部或脚部,接受参数header,footer |
Slots
插槽 |
说明 |
default |
内容区域 |
header |
头部(永远固定在头部的内容) |
footer |
脚部(永远固定在脚部的内容) |
mask |
遮罩层 |
方法
方法名 |
参数说明 |
说明 |
mask(参数) |
Boolean, 'show','hide' |
调用此方法可以弹出mask层,参数可传入true,false或者show,hide |