美文网首页uni
uni 小程序遮罩覆盖tabbar (伪)

uni 小程序遮罩覆盖tabbar (伪)

作者: litielongxx | 来源:发表于2021-12-02 15:57 被阅读0次

    一般来说tabbar为小程序的最高级,view覆盖不了的。
    网上大多数指的都是uni中app-plus,h5/app而非小程序。
    但是可以变相的通过设置标题颜色和tabbar颜色实现,自定义因不考虑单个影响全部故弃用。


    image.png

    以u-view中u-modal示范。

    methods:{
      showModalBg() {
          uni.setTabBarStyle({
            backgroundColor: "#666",
            borderStyle: "black",
            selectedColor: "#999",
            color: "#999",
          });
    
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#666",
          });
        
          // 底部tabbar中几个选项展示时设置,放弃弹窗时恢复
          //tabbar1
          uni.setTabBarItem({
            index: 0,
            selectedIconPath: "static/tabbar/tab_bs_on.png",
          });
         // tabbar2
          uni.setTabBarItem({
            index: 1,
            iconPath: "static/tabbar/tab_sy_off.png",
          });
        // tabbar3
          uni.setTabBarItem({
            index: 2,
            iconPath: "static/tabbar/tab_wd_off.png",
          });
        },
        removeModeBg() {
          uni.setTabBarStyle({
            color: "#999999",
            selectedColor: "#18C183",
            borderStyle: "white",
            backgroundColor: "#ffffff",
          });
    
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#ffffff",
          });
    
          uni.setTabBarItem({
            index: 0,
            selectedIconPath: "static/tabbar/home-act.png",
          });
          uni.setTabBarItem({
            index: 1,
            iconPath: "static/tabbar/step.png",
          });
          uni.setTabBarItem({
            index: 2,
            iconPath: "static/tabbar/personal.png",
          });
        },
    
    }
    

    ps:
    borderStyle只能为white或black;
    frontColor只能为#000或#fff,写错任何一项不会生效。
    本质为替换了高亮时的cion和背景色伪实现
    不足是tabbar边框只有white/black,切需要设计配合给出遮罩下图。

    【参考资料】https://blog.csdn.net/liujucai/article/details/103816123

    相关文章

      网友评论

        本文标题:uni 小程序遮罩覆盖tabbar (伪)

        本文链接:https://www.haomeiwen.com/subject/gsnyxrtx.html