微信程序 自定义遮罩层遮不住底部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>
相关推荐
红橙Darren1 天前
手写操作系统 - 环境搭建
android·微信·操作系统
陈思杰系统思考Jason2 天前
系统思考:多元胜过能力
百度·微信·微信公众平台·新浪微博·微信开放平台
今日热点3 天前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
泉城老铁3 天前
SpringBoot对接微信公众号并实现消息发送功能详解
后端·微信
夏至春来-美美4 天前
微信获取access_token授权的两种不同情况
微信·php·微信公众平台
mon_star°4 天前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
呆呆的心7 天前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
拖孩7 天前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
老蒋新思维7 天前
多门店系统:知识付费行业的规模化增长新引擎|创客匠人
微信·内容运营·创始人ip
二十十十十十10 天前
微信点餐小程序—美食物
微信·小程序