更新记录
1.0.0(2021-12-06)
下载此版本
首次提交
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
用法
此方法为解决气泡框无法覆盖导航栏问题
原理:通过页面跳转方式 设置页面为透明实现可覆盖导航栏 仅支持app
popup,弹框等均可按照此思路解决无法覆盖导航栏问题
由于是路由跳转,请先下载案例查看,
1.注意page.json 的页面配置
// 气泡框
{
"path": "pages/bubbleBox/index",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"backgroundColor": "transparent",
"app-plus": {
"animationType": "fade-in",
"background": "transparent",
"popGesture": "none"
}
}
}
//导航栏图标点击
onNavigationBarButtonTap(e) {
console.log(e);
if (e.index == 0) {
//传参
var bubbleObj = {
top: 60,
right: 20,
locSign: 'right',
bubbleList: [{ iconName: "icon-dayin1", content: "三角在右边哦" }],
};
}else if(e.index==1) {
var bubbleObj = {
top: 60,
right: 470,
locSign: 'left',
bubbleList: [{ iconName: "icon-dayin1", content: "三角在左边哦" }],
};
}
uni.navigateTo({
//页面传值
url:"/pages/bubbleBox/index?bubbleObj="+encodeURIComponent(JSON.stringify(bubbleObj)),
});
},
参数
参数 |
类型 |
默认值 |
可选值 |
解释 |
bubbleObj |
Object |
* |
* |
页面传参对象 |
locSign |
String |
center |
left right center |
三角的位置 |
top |
Number |
150 |
* |
距离顶部的距离 rpx |
right |
Number |
20 |
* |
距离右侧的距离 rpx |
showIcon |
Boolean |
true |
true false |
是否显示图标 |
iconColor |
String |
#333333 |
* |
图标颜色 |
textColor |
String |
#333333 |
* |
列表文字颜色 |
bubbleList |
Array |
* |
* |
列表数据 |
请先下载案例查看--