更新记录

1.0.0(2021-12-06) 下载此版本

首次提交


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
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 * * 列表数据

请先下载案例查看--

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问