微信小程序tabBar自定义弹窗遮挡不住解决技巧

目录
  • 背景
  • 方法一：自定义tabbar
  • 方法二：套用原生提供的tabbar自定义功能，嵌套自己的tabbar组件
  • 总结
  • 成果

背景

最近开发微信小程序发现一个问题，就是微信小程序官方自带的tabbar层级很高，自定义modal盖不住tabbar的问题；翻阅官方的社区，很多同学说 设置z-index:99999；可以解决这个问题，我实践下来是有问题的；ios是解决不了问题；经过反复实践有两种方法可以解决问题；

方法一：自定义tabbar

这个方法就是完全放弃微信官方的tabbar；自己用SPA的方式去实现一个tabbar; 这个方法的优点：

  • tabbar能自己定制化；顺手也解决了盖不住的问题；
    缺点在于：
  • 要自己实现微信官方的实现的功能比如wx.switchTab等基础功能
  • 需要自己实现路由管理
  • 需要比较大测试成本
    整体实现成本还是比较大的，具体实现方法这里不做演示，感兴趣的可以自行找相关的文章；社区有许多这个文章。

方法二：套用原生提供的tabbar自定义功能，嵌套自己的tabbar组件

具体实现方法如下：
第一步:开启原生的自定义tabbar功能：

// app.json加入以下代码
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/account/index",
        "text": "我的"
      }
    ]
  },

第二步:在根目录创建空的tabbar

// custom-tab-bar/index.js
// custom-tab-bar/index.json
// custom-tab-bar/index.wxml
// custom-tab-bar/index.wxss
// index.wxml
  <view></view>
// index.js
  Component({});
// index.json
    {
      "component": true
    }

第三步：创建件自己的tabbar组件

// wxml
<view class="tab-bar__block"></view>
<view class="tab-bar">
  <view class="tab-bar__item {{ index == selected ? 'tab-bar__active' : '' }}" wx:for="{{list}}" wx:key="index" bind:tap="handleClick" data-index="{{ index }}" data-path="{{ item.pagePath }}">
    <icon icon="{{ index == selected ? item.currentIcon : item.icon }}" size="28px" />
    <view class="tab-bar__text">{{ item.text }}</view>
  </view>
</view>
// js
  methods: {
    /**
     * 点击tab 切换
     * @param e event
     */
    handleClick(e: WechatMiniprogram.CustomEvent) {
      const { path, index } = e.currentTarget.dataset;
      const { list } = this.data;
      wx.switchTab({
        url: path,
      });
  },

第四步：使用页面正常使用自己的tabbar组件

// wxml
<tab-bar selected="{{0}}" />
// json
{
  "usingComponents": {
    "tab-bar": "../../components/business/tab-bar"
  }
}

解决问题方法大致思路就是这些，
方法的优点是：能比较快速的解决遮挡不住的问题;且支持原生小程序tabbar的大部分功能 方法的缺点是：

  • page 生命周期 onTabItemTap 不可以触发，需要自己实现
  • Icon 第一次切换会闪一下

总结

方法二相比方法一来说；实现成本低的多，适合时间紧任务重的时候作为临时的解决方案，但是，总体来说还是比较hack的一种方式，如果有时间的话可以自己实现tabbar为上上策；顺便吐槽一下，为啥官方社区都是说用z-index解决，可是明显不行啊

成果

以上就是微信小程序tabBar自定义弹窗挡不住解决技巧的详细内容，更多关于微信小程序tabBar弹窗的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 微信小程序全局配置之tabBar实战案例

    微信小程序全局配置之tabBar实战案例

    目录 全局配置 - tabBar 1. 什么是 tabBar 2. tabBar 的 6 个组成部分 3. tabBar 节点的配置项 4. 每个 tab 项的配置选项 全局配置 - 案例:配置 tabBar 1. 需求描述 2. 实现步骤 3. 步骤1 - 拷贝图标资源 4.步骤2 - 新建 3 个对应的 tab 页面 5. 步骤3 - 配置 tabBar 选项 6. 完整的配置代码 总结 全局配置 - tabBar 1. 什么是 tabBar tabBar 是移动端应用常见的页面效果, 用于

  • uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

    uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

    目录 需求 实现原理 实现 总结 需求 分包中如果有6个页面A B C D E F,这6个页面可以作为tabbar页面进行展示,具体配置通过后台接口返回(页面数量限制依然存在 2 - 5),比如后台配置A B C D E这个5个页面为tabbar页面,那么A B C D E将作为tab页展示,跳转方式也是tab方式跳转,跳转到F页面为普通navigate跳转.这将解决 多商家底部tab配置问题,可以让商家自己配置小程序tab页的展示模式. 实现原理 1.自定义底部导航,数据通过接口获取 2.将需

  • 微信小程序自定义渐变的tabbar导航栏功能

    微信小程序自定义渐变的tabbar导航栏功能

    做为自己的一个小笔记,以免后面再用到 1,在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom" ,隐藏系统导航栏 { "navigationBarTitleText": "", "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "

  • 微信小程序tabBar组件切换与下拉刷新实现详解

    目录 前言 一.tabBar切换 1.为什么使用tabBar 2.注意事项 3.如何使用 二.下拉刷新 前言 基本上,所有的小程序,页面底部都有个tab,来实现页面的切换,效果如下 一.tabBar切换 1.为什么使用tabBar 在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能.在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab. 2.

  • 微信小程序如何根据不同用户切换不同TabBar(简单易懂!)

    微信小程序如何根据不同用户切换不同TabBar(简单易懂!)

    目录 现有需求: 1全局.app.json 2.自定义custom-tab-bar 结果展示 总结 现有需求: 小程序用户有三种身份(公众.运维人员.领导),根据不同用户身份显示不同的tabbar 众所周知微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个,要想实现3个tabbar,必须得复用tabbar,三种身份都需要个人中心,剩下的是长列表(两个),表单,图表 刚好是5个,废话少说,上代码 代码有点长,建议仔细看一下 1全局.app.json t

  • 微信小程序实现tabbar凹凸圆选中动画效果实例

    目录 1.实现效果 2.实现原理 2.1 引入阿里巴巴矢量图标 2.2 css函数var 2.3 ios底部安全距离 2.4 css属性transition 2.5 box-shadow 2.6 border-radius 3.实现步骤 3.1 实现底部tabbar 3.2 tabbar背景凹凸圆角 4.实现代码 参考链接: 总结 1.实现效果 2.实现原理 2.1 引入阿里巴巴矢量图标 可参考文章:微信小程序引入外部icon(阿里巴巴矢量图标)[1]^{[1]}[1] 2.2 css函数var

  • 微信小程序tabBar自定义弹窗遮挡不住解决技巧

    目录 背景 方法一:自定义tabbar 方法二:套用原生提供的tabbar自定义功能,嵌套自己的tabbar组件 总结 成果 背景 最近开发微信小程序发现一个问题,就是微信小程序官方自带的tabbar层级很高,自定义modal盖不住tabbar的问题:翻阅官方的社区,很多同学说 设置z-index:99999:可以解决这个问题,我实践下来是有问题的:ios是解决不了问题:经过反复实践有两种方法可以解决问题: 方法一:自定义tabbar 这个方法就是完全放弃微信官方的tabbar:自己用SPA的方

  • 微信小程序封装自定义弹窗的实现代码

    最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d

  • 微信小程序实现自定义弹窗组件的示例代码

    微信小程序实现自定义弹窗组件的示例代码

    目录 编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件 上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果 那么,首先,我们创建一个组件 新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx

  • 微信小程序原生自定义弹窗效果

    微信小程序原生自定义弹窗效果

    背景 微信小程序原生的在弹出层wx.showModal中可以通过配置项editable配置输入框,但是对于微信的版本有限制,微信版本过低无法显示,所以需要实现弹出层的效果 如下图 代码 index.wxml <!-- 遮罩层 -->   <view wx:if="{{isShow}}" class='cover'>     <!-- 可在此按需求自定义遮罩 -->     <view style="position: relative

  • 微信小程序实现自定义modal弹窗封装的方法

    微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序开发自定义tabBar实战案例(定制消息99+小红心)

    目录 一.前提概要 二. 动态显示info消息 三. 页面切换效果 四. 配置总结 一.前提概要 效果:实现一个自定义tabBar,使消息tabBar能够显示消息数量,并通过全局共享的方式,控制消息数量 需要的知识点如下: mobx辅助库(全局共享,见文章) vant组件库(见文章) 组件的behavior (见文章) 自定义组件 样式隔离 组件数据监听器 自定义组件主要分为三个步骤(许多实例实现步骤差不多流程) 配置信息 (几乎每个要实现的都需要这一步) 创建自定义组件代码文件 编写代码 详细

  • 微信小程序tabBar底部导航中文注解api详解

    微信小程序tabBar底部导航中文注解api详解

    微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解释. 微信小程序tabBar是在全局app.json文件里面配置的. 小程序tabBar配置代码注解 { "pages":[ "pages/index/index", "pages/detail/detail" ], "window":{ "navigatio

  • 微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx

  • 微信小程序tabbar不显示解决办法

    微信小程序tabbar不显示解决办法 "pages":[ "pages/logs/logs", "pages/index/index" ], 微信小程序在测试tabbar的时候怎么都不显示. 我就不贴api了.直接上代码 { "pages":[ "pages/logs/logs", "pages/index/index" ], "window":{ "bac

  • 微信小程序tabBar模板用法实例分析【附demo源码下载】

    微信小程序tabBar模板用法实例分析【附demo源码下载】

    本文实例讲述了微信小程序tabBar模板用法.分享给大家供大家参考,具体如下: 众所周知,微信小程序的tabBar都是新开页面的,而微信文档上又表明了最多只能打开5层页面.这样就很容易导致出问题啦,假如我的tabBar有5个呢?下面是微信原话: 一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面.请避免多层级的交互方式,或者使用wx.redirectTo 因此这几天想着根据微信tabBar数组来自定义模板供页面调用.不过我在list里面每个对象都

随机推荐