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

一、先上效果

二 方法

1、自定义底部tabbar

实现:

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

简单写下:在代码根目录下添加入口文件 除了js 文件的list 需要调整 其他原封不动

代码:

js部分

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

json 复制代码
{
  "component": true,
  "usingComponents": {}
}

wxml

html 复制代码
<!--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

.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;
}

.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中加入一下方法

js 复制代码
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }

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

html 复制代码
<!-- 遮罩层 -->
<van-overlay show="{{ overlayShow }}" vertical z-index="{{999999}}">
  <view class="overlay-content">
    <van-loading type="spinner">加载中...</van-loading>
  </view>
</van-overlay>
相关推荐
二十十十十十3 天前
微信点餐小程序—美食物
微信·小程序
m0_6855350813 天前
如何实现财务自由
微信·新浪微博·光学·光学设计·光学工程
书虫AI13 天前
登顶生图榜前三!FLUX.1 Kontext 为什么把 PS 都逼急了?
微信
陈思杰系统思考Jason14 天前
系统思考VS心智模式
百度·微信·微信公众平台·新浪微博·微信开放平台
狂团商城小师妹15 天前
设备巡检系统小程序ThinkPHP+UniApp
微信·微信小程序·小程序·uni-app·微信公众平台
程序员君常笑15 天前
rent8_wechat-最常用出租屋管理系统-微信小程序
微信·微信小程序·小程序
未来之窗软件服务16 天前
js调用微信支付 第二步 获取access_token ——仙盟创梦IDE
开发语言·javascript·微信·微信支付·仙盟创梦ide·东方仙盟
岩苍美津未17 天前
H5项目在微信公众号中如何本地调试微信sdk
微信·微信小程序
云起SAAS17 天前
猜数字小游戏微信流量主小程序开源
微信·小程序·猜数字小游戏微信流量主小
云起SAAS17 天前
经典俄罗斯方块微信小游戏流量主小程序开源
微信·小程序·经典俄罗斯方块微信小游戏流