当前位置：首页 > news >正文

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

news 2025/8/2 9:09:50

一、先上效果

在这里插入图片描述

二方法

1、自定义底部tabbar

实现：

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

简单写下：在代码根目录下添加入口文件 除了js 文件的list 需要调整其他原封不动
在这里插入图片描述

代码：
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.datasetconst url = data.pathwx.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

  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>