微信程序自定义遮罩层遮不住底部tabbar解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信程序自定义遮罩层遮不住底部tabbar解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、先上效果

微信程序自定义遮罩层遮不住底部tabbar解决,微信

二方法

1、自定义底部tabbar

实现：

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 官网去抄

简单写下：在代码根目录下添加入口文件 除了js 文件的list 需要调整其他原封不动
微信程序自定义遮罩层遮不住底部tabbar解决,微信

代码：
js部分

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#0081FF",
    list: [{  // 同app.json下的tabbar列表
        "iconPath": "/assets/img/build.png",
        "selectedIconPath": "/assets/img/buildSelect.png",
        "pagePath": "/pages/index/index",
        "text": "淘楼"
      },
      {
        "iconPath": "/assets/img/my.png",
        "selectedIconPath": "/assets/img/selectMy.png",
        "pagePath": "/pages/my/index",
        "text": "我的"
      }
    ]
  },
  attached() {},
  methods: {
    switchTab(e) {
      console.log(e.currentTarget)
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})

json

{
  "component": true,
  "usingComponents": {}
}

wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

wxss文章来源地址https://www.toymoban.com/news/detail-652299.html

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 27px;
  height: 27px;
}

.tab-bar-item view {
  font-size: 10px;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 27px;
  height: 27px;
}

.tab-bar-item view {
  font-size: 10px;
}

2、 list 的中的页面都需要在`onShow`中加入一下方法

    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }

三、遮罩层盖住底部tabbar 自己实现一个遮罩层或者使用组件我这儿用的组件只需要让z-index:的值大于99999 即可

<!-- 遮罩层 -->
<van-overlay show="{{ overlayShow }}" vertical z-index="{{999999}}">
  <view class="overlay-content">
    <van-loading type="spinner">加载中...</van-loading>
  </view>
</van-overlay>