微信自定义tabBar层级z-index修改

最新推荐文章于 2025-01-10 13:54:54 发布
最新推荐文章于 2025-01-10 13:54:54 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23943923/article/details/119819049
版权
本文介绍如何在微信小程序中自定义tabBar，以解决遮罩层无法遮住底部tabbar的常见问题。通过修改index.html和index.css，将cover-view和cover-image替换为view和image，从而实现调整z-index，确保遮罩层能正确覆盖底部导航栏。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求:遮罩层要遮住底部tabbar;
解决方案：
使用小程序自定义tabBar,参考链接如下：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

修改index.html，index.css,将cover-view 替换成view，cover-image替换成image。这样就可以修改z-index了。因为cover-view和cover-image的层级特别高，之前试了各种方法，都无法改变z-index。

 

 index.html修改

完成

 

 

 

解决微信小程序tabBar自定义弹窗遮挡不住
小陈的博客
02-07 6500
这个方法就是完全放弃微信官方的tabbar；自己用SPA的方式去实现一个tabbar;这个方法的优点tabbar能自己定制化；顺手也解决了盖不住的问题；缺点在于：要自己实现微信官方的实现的功能比如wx.switchTab等基础功能需要自己实现路由管理需要比较大测试成本整体实现成本还是比较大的，具体实现方法这里不做演示，感兴趣的可以自行找相关的文章；社区有许多这个文章。
微信小程序——自定义底部tabBar
每天都要努力学习哦~~
05-10 1万+
》如果在选择点击切换按钮时，页面没根据tabBar进行切换，问题很可能能在custom-tab-bar目录的index.js 的list数据配置的页面路径，一定要。由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。第一步骤中的custom设置为true，小程序就可以自动读取该目录下的index组件，把该组件当做tab渲染出来。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。此时，通过点击切换页面，就可以实现。
微信小程序自定义tabBar的踩坑实践记录
01-18
微信官方文档对自定义 tabBar 的阐述较为潦草，在开发自定义 tabBar 过程中我踩了很多坑，因此在此处做个总结。 我使用 Vant Weapp 作为 UI 组件库，下面以此组件库为例。 定义 tabBar 创建自定义 tabBar 文件 创建一个与 /pages 的同级目录，命名为  /custom-tab-bar，注意目录层级与目录命名问题，不可用其他名称命名。 在 /custom-tab-bar 下创建四个文件： index.js index.json index.wxml index.wxss index.js 在 index.js 中我们定义相关数据： active：
小程序自定义tabbar
qq_30142751的博客
05-22 457
小程序根目录创建文件夹并建立以下文件 在app.json添加tabBar 如下图： 创建完成在app.json中使用 “usingComponents”:{} 全局配置 index.wxml文件 <view class='tab-bar'> <view class="tab-bar-bg"></view> <!-- 首页 --> <view class='tab-bar-index' data-index='0'
微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】
weixin_42289080的博客
09-22 3252
一、这是模拟器上的效果 二、这是苹果11真机上的效果（安卓真机正常） 三、先来理一下代码的层级现状 A 为van-tabs B 是自定义组件，为数据列表，C为单个数据 D 也是自定义组件（图中省略）为单个数据详情弹窗，且D是B的子组件！ 在z-index层级上 A是相对定位，B、C无定位，所以A>B D设置z-index 9999 但不生效 四、理清楚之后，有一个大胆的猜想： B、D均为自定义组件，且D是B的子组件，会不会导致D的层级最高只能和B一样高？导致不能穿透B，所以被A组件盖住
微信小程序--组件覆盖之position和z-index
热门推荐
一如年少丶的博客
08-25 2万+
在写页面的时候，我们常常会有这样的需求，就是将一个组件置于另一个组件之上。那么，该如何来实现呢？ 其实，非常简单我们只需要在wxss里设置好position和z-index这两个属性就好了 1.父组件，必须将其position属性设置为relative .uploader-img { /* display: block; */ position: absolute; z-ind...
案例 - 自定义 tabBar 项目源码
09-13
在`app.wxss`中，我们可以对`tabBar`的每个项进行单独的样式设置，比如添加`z-index`来控制层级，以及使用`position`属性来调整位置。 3. **小程序导航栏** 微信小程序的导航栏可以通过`app.wxss`全局设置或在每个...
微信小程序自定义tabbar组件点击对应区域显示凸起效果
nan961136007的博客
01-09 3648
今天呢，看到设计图，难搞啊，要自定义组件，是时候动动脑子了，哈哈。 我呢，方法用的比较笨，代码有点冗余了，还望体谅哈 首先呢，先创建template文件夹，里面包含wxml，wcss和 js 先来wxml代码吧 <view class='footer'> <view class='footer_list' data-current="{{0}}" bindtap="ch...
微信小程序-骚操作，自定义授权对话框，且遮盖层遮住tabBar
weixin_34000916的博客
11-16 1万+
首发帖， 若有不足或错误或更优的方式，请指出，感谢 假设场景 当用户进入小程序之后， 需要在获取到头像昵称等相关信息授权之后才允许他进行其它交互操作; 由于微信小程序升级之后, 直接调用 wx.authorize({scope: "scope.userInfo"})，无法再弹出授权窗口; 需要变相使用 <button open-type="getUserInfo"/>来引导用户进行基...
微信小程序 自定义底部导航栏（tabbar）
H_ZMY的博客
07-09 1635
底部导航栏 自定义导航栏
微信小程序 实现底部导航栏tabbar
JxufeCarol的博客
06-10 6059
参考链接： （1）微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html （2）小程序自定义tabbar实现中间图标突出效果(附带wx.hideTabBar不生效的bug解决方案) https://www.jianshu.com/p/ce1c3c25527c （3）微信小程序入门四: 顶部、导航栏样式、tabBar导航栏 https://blog.csdn.net/haibo0668/article/details/8065168
【微信小程序】自定义tabbar
韩旭不会敲代码吧的博客
03-17 2179
自定义tabbar
小程序自定义TabBar
web_hj的博客
08-23 482
先说说遇到的问题 当使用微信原生的tabBar时，tabBar是固定在最下面 ，并且层级最高。当我想做一个弹窗时 tabBar还是会显示在最上面，弹窗覆盖不了。当时想到了显示弹窗时 使用wx.hideTabBar();先隐藏tabbar 当弹窗关闭时在wx.showTabBar();显示； 如果这样会遇到另外一个问题 显示tabbar 和隐藏tabbar 页面page 的高度是不同的 当你这...
tabBar底部导航栏
luping_的博客
07-12 3013
tabBar "tabBar":{ "color":"#ccc", "backerStyle":"white", "selectedColor":"#555", "backgroundColor": "#ffffff", "list":[ { "pagePath":"pages/shouye/shouye", "iconPath": "images/shouye1.png", "selectedIconPath": "im...
uniapp 微信小程序自定义tabbar层级低于canvas解决方案
weixin_59685936的博客
09-11 583
uniapp 微信小程序自定义tabbar层级低于canvas解决方案
微信小程序开发自定义tabbar
baorant24的博客
04-19 1090
本文初步介绍了微信小程序开发中如何自定义tabbar
小程序入门之自定义导航条和底部navigationBar的配置
xuanyuan_jia的博客
07-29 1188
小程序的自制导航条 很多小程序的导航条都是自己写的，拥有自己的风格。我在写小程序页面的时候发现了这个问题并且找了很多网上的文章，但是没找到满意的，文件的位置都不是很清楚，不适合小白写小程序的页面，所以我也写一篇，方便自己方便他人。 准备工作 工具：微信开发者工具 实现效果： 首先，桌面新建文件夹，然后通过微信开发者工具测试号打开文件夹。 一开始是这几个文件，红色的是我之前建的，觉得可以写文章记一下就没有重新做了。找到pages里面的两个文件index和log页，删除这两个文件。然后在pages里面新建一
小程序自定义底部tabbar，并且解决遮罩层无法遮挡住底部tabbar问题
最新发布
qq_43610311的博客
01-10 1635
小程序自定义底部tabbar，并且解决遮罩层无法遮挡住底部tabbar问题
uniapp引入微信自定义tabbar怎样显示高亮生命周期需不需要改变
08-31
UniApp 中引入微信自定义 tabBar 高亮状态通常发生在用户切换到对应的页面时，此时会自动关联预设的 tabBar 标签并显示相应的颜色。在 UniApp 的微信小程序生态中，开发者不需要手动管理每个 tab 的生命周期，因为微信官方已经处理了这部分逻辑。 当某个 tab 被选中时，uni-app 小程序会自动更新 tabBar 的样式，使之处于高亮状态。但是，如果你需要在特定条件下手动控制 tab 的高亮状态，比如基于用户的登录状态或其他业务条件，你可以通过监听页面的激活事件或者在合适的时机更改 tabBar 的配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值