由于我是需要多个小程序使用这个样式,索性就直接封装成组件,方便其它的小程序使用......
过程中遇到的一些问题,以及如何解决
1.遮罩层遮不住tabbar,首先自定义tabbar,然后遮罩层z-index设置成99999,基本就能搞定;
/*原生tabbar遮挡不住,custom改为true*/
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"list": [
{
"pagePath": "pages/test/test",
"text": "test",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/index/index",
"text": "home",
"iconPath": "",
"selectedIconPath": ""
}
]
},
/* 遮罩层 */
.overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: #00000070;
}
2.关于胶囊按钮位置获取,直接调用wx.getMenuButtonBoundingClientRect()就可以实现;
const res = wx.getMenuButtonBoundingClientRect()
3.关于检测是否添加到我的小程序中,调用 wx.checkIsAddedToMyMiniProgram,先用checkIsAddedToMyMiniProgram检测是否可用
if (wx.canIUse('checkIsAddedToMyMiniProgram')) {
try {
wx.checkIsAddedToMyMiniProgram({
success: (res) => {
// 需要执行的代码
},
fail: () => {
// 需要执行的代码
},
});
} catch (error) {
// 需要执行的代码
}
} else {
// 需要执行的代码
}
4.最后就是如何使用了
<reminder showOverlay="{{showOverlay}}" capsule="{{capsule}}" width="{{pageWidth}}" height="{{pageHeight}}" />