uniapp 实现底部导航中间按钮出弹框

先看一下要实现的效果

点击加号弹出层展示

实现原理： 1、由于uniapp本身可以设置全局属性，在App.vue文件中添加globalData，并监听中间按钮点击

    //App.vue
    globalData: {
        showPush: false
    },
    onLaunch: function() {
        uni.onTabBarMidButtonTap(() => {
            getApp().globalData.showPush = true
        })
    },

2、同时添加一个方法，定义method写一个watch方法用来让组件能动态监听

    //App.vue
    watch(methos, istr) { //方法；值
        let obj = this.globalData;
        let info = '';
        //Object.defineProperty()方法，会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象 Object.defineProperty(obj, istr, {
        Object.defineProperty(obj, istr, {
                // value:"hello", // 属性对应的值，默认为 undefined
                // writable:false, // 默认为 false，表示只读，无法给该属性赋值。在严格模式中，给只读属性赋值会报错。宽松模式中，给只读属性赋值不会生效
                enumerable: true, // 目标属性是否可以被枚举。true | false（使用for...in或Object.keys()）
                configurable: true, // 目标属性是否可以被删除或是否可以再次修改特性 true | false
                set: function(value) { //当设置值的时候触发的函数,设置的新值通过参数value拿到
                        this._consumerGoodsStatus = value
                        methos(value)
                        info = value;
                },
                get: function(value) {
                        return this._consumerGoodsStatus
                }
        });
    }

3、建一个pop组件（这里我用了uview的组件 u-popup ） 逻辑部分通过showPop控制展示

    //组件页面
    data() {
        return {
            showPop:false
        };
    },
    mounted() { //注意，在组建生命周期中挂在好之后我们就开始监听全局变量改变
        getApp().watch(this.onloadAd, 'showPush'); 
        //第一个参数是我们自己下面写的方法 //第二个参数是要监听的全局变量
    },
    methods:{
        onloadAd(res){ //全局变量改变后会执行函数进行赋值
            this.showPop = res  
        },
        close(){  //关闭弹窗
            getApp().globalData.showPush = false
        }
    }

4、最后一步，我们把组件挂在到某一个页面或者全局中，这里我挂了全局页面中，当然能触发还是只有底部导航定义的四个页面 --- (只有那四个显示导航栏)

    //main.js
    //在 app.$mount() 后面写
    document.body.appendChild(new BottomPush().$mount().$el)

这样我们就能够实现我们想要的结果了，希望对你有帮助，感谢关注和点赞，有问题欢迎留言