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

一、先上效果

在这里插入图片描述

二 方法

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

  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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/81875.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RT1052的EPWM

文章目录 1 EPWM介绍1.1 引脚1.2 时钟1.3 比较寄存器 2 函数 1 EPWM介绍 RT1052 具有 4 个 eFlexPWM(eFlexWM1~eFlex_PWM4)。 每个 eFlexPWM 可以产生四路互补 PWM即产生 8 个 PWM&#xff0c;也可以产生相互独立的 PWM 波。四路分别是模块0-3每个 eFlexPWM 具有各自的故障检…

opencv进阶09-视频处理cv2.VideoCapture示例(打开本机电脑摄像头)

视频信号&#xff08;以下简称为视频&#xff09;是非常重要的视觉信息来源&#xff0c;它是视觉处理过程中经常要处理的一类信号。实际上&#xff0c;视频是由一系列图像构成的&#xff0c;这一系列图像被称为帧&#xff0c;帧是以固定的时间间隔从视频中获取的。获取&#xf…

react之路由的安装与使用

一、路由安装 路由官网2021.11月初&#xff0c;react-router 更新到 v6 版本。使用最广泛的 v5 版本的使用 npm i react-router-dom5.3.0二、路由使用 2.1 路由的简单使用 第一步 在根目录下 创建 views 文件夹 ,用于放置路由页面 films.js示例代码 export default functio…

如何在前端实现WebSocket发送和接收UDP消息(多线程模式)

目录 简介&#xff1a;步骤1&#xff1a;创建WebSocket连接步骤2&#xff1a;创建Web Workers步骤3&#xff1a;发送和接收UDP消息&#xff08;多线程模式&#xff09;结束语&#xff1a; 简介&#xff1a; 本文将继续介绍如何在前端应用中利用WebSocket技术发送和接收UDP消息…

C#生产流程控制(串行,并行混合执行)

开源框架CsGo https://gitee.com/hamasm/CsGo?_fromgitee_search 文档资料&#xff1a; https://blog.csdn.net/aa2528877987/article/details/132139337 实现效果 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37…

vue 关闭prettier警告warn

这个就是我们创建vue cli的时候 把这个给默认上了 关闭这个只需在.eslintrc.js页面里边添加一行代码"prettier/prettier": "off"

从零开始创建 Spring Cloud 分布式项目,不会你打我

目录 一、Spring Cloud 和 分布式 二、创建新项目 三、导入 Spring Cloud 依赖 四、配置 Spring Cloud 一、Spring Cloud 和 分布式 Spring Cloud是一个基于Spring框架的开源微服务框架&#xff0c;它提供了一系列工具和组件&#xff0c;用于帮助开发人员构建分布式系统中…

(学习笔记-进程管理)什么是悲观锁、乐观锁?

互斥锁与自旋锁 最底层的两种就是 [互斥锁和自旋锁]&#xff0c;有很多高级的锁都是基于它们实现的。可以认为它们是各种锁的地基&#xff0c;所以我们必须清楚它们之间的区别和应用。 加锁的目的就是保证共享资源在任意时间内&#xff0c;只有一个线程访问&#xff0c;这样就…

韦东山老师 RTOS 入门课程(一)RTOS 介绍,熟悉裸机的汇编逻辑

韦东山老师 RTOS 入门课程 课程链接&#xff1a;韦东山直播公开课&#xff1a;RTOS实战项目之实现多任务系统 第1节&#xff1a;裸机程序框架和缺陷_哔哩哔哩_bilibili RTOS 介绍 裸机&#xff1a;固定顺序执行。 中断&#xff1a;可以一直专心做循环里的事情&#xff0c;直…

最长回文子串

给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 示例 1&#xff1a; 输入&#xff1a;s “babad” 输出&#xff1a;“bab” 解释&#xff1a;“aba” 同样是符合题意的答案。 示例 2&#xff1a; 输入&#xff1a;s “cbbd” 输出&#xff1a;“bb” 提示&#xff…

排序算法-冒泡排序(C语言实现)

简介&#x1f600; 冒泡排序是一种简单但效率较低的排序算法。它重复地扫描待排序元素列表&#xff0c;比较相邻的两个元素&#xff0c;并将顺序错误的元素交换位置&#xff0c;直到整个列表排序完成。 实现&#x1f9d0; 以下内容为本人原创&#xff0c;经过自己整理得出&am…

SQL-Injection

文章目录 引入columns表tables表schemata表以sqli-labs靶场为例路径获取常见方法文件读取函数文件写入函数防注入 数字型注入(post)字符型注入(get)搜索型注入xx型注入 引入 在MYSQL5.0以上版本中&#xff0c;mysql存在一个自带数据库名为information_schema,它是一个存储记录…

C++之模板进阶

模板进阶 非类型模板参数模板的特化概念函数模板特化类模板特化全特化偏特化 模板分离编译什么是分离编译模板的分离编译解决方法 模板总结 非类型模板参数 模板参数分两种&#xff1a;类型形参与非类型形参。 类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class…

华为OD机试关于无输入截止条件的ACM输入逻辑

无输入截止条件的ACM输入 华为OD机试题中有一些题目是没有输入截止条件的,比如 华为OD机试 - 数字游戏(Java & JS & Python)_伏城之外的博客-CSDN博客 从输入描述来看,每组有两行输入,但是并没有告诉我们具体有几组? 那么输入该如何截止呢? 此时,有两种输入…

计网第三章(数据链路层)(三)

一、点对点协议PPP 在第一篇里有提到数据链路层的信道分为两种&#xff1a;点对点信道和广播信道。 PPP协议就属于点对点信道上的协议。 如果对前面数据链路层的三个基本问题了解的比较透彻&#xff0c;那么这一块很多东西都很好理解。 从考试的角度来讲&#xff0c;PPP协议…

Docker基础入门:从0开始学习容器化技术

Docker基础入门&#xff1a;从零开始学习容器化技术 一、Docker基础1.1、Docker起源1.2、Docker概念1.3、Docker优势1.4、Docker 的组成 二、Docker安装2.1、卸载旧版Docker2.2、需要的安装包依赖2.3、设置镜像仓库2.4、更新yum软件包索引2.5、安装Docker--社区版2.6、配置镜像…

线程池原理

一、线程池的定义 线程池&#xff0c;按照配置参数&#xff08;核心线程数、最大线程数等&#xff09;创建并管理若干线程对象&#xff0c;没有任务的时候&#xff0c;这些线程都处于等待空闲状态。如果有新的线程任务&#xff0c;就分配一个空闲线程执行。如果所有线程都处于…

[三次握手]TCP三次握手由入门到精通(知识精讲)

⬜⬜⬜ &#x1f430;&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;(*^▽^*)欢迎光临 &#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;&#x1f430;⬜⬜⬜ ✏️write in front✏️ &#x1f4dd;个人主页&#xff1a;陈丹宇jmu &am…

删除有序链表中重复的元素-II(链表)

乌&#xff01;蒙&#xff01;山&#xff01;连&#xff01;着&#xff01;山&#xff01;外&#xff01;山&#xff01; 题目&#xff1a; 思路&#xff1a; 双指针&#xff0c;slow和fast&#xff0c;并且增加标记flag初始为1。 如果slow指向节点值等于fast指向节点值&…

pytorch3d成功安装

一、pytorch3d是什么&#xff1f; PyTorch3D的目标是帮助加速深度学习和3D交叉点的研究。3D数据比2D图像更复杂&#xff0c;在从事Mesh R-CNN和C3DPO等项目时&#xff0c;我们遇到了一些挑战&#xff0c;包括3D数据表示、批处理和速度。我们开发了许多有用的算子和抽象&#xf…