美文网首页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