background
Recently, I discovered a problem when developing WeChat mini programs. The official tabbar level of WeChat mini programs is very high, and the custom modal cannot cover the tabbar problem. Looking through the official community, many students said that setting z-index: 99999 can solve this problem. Problem, after my practice, there is a problem; ios cannot solve the problem; after repeated practice, there are two ways to solve the problem;
Method 1: Customize tabbar
This method is to completely abandon WeChat’s official tabbar; use SPA to implement a tabbar yourself; The advantages of this method :
- The tabbar can be customized; it also solves the problem of not being able to cover it; the disadvantages are:
- You need to implement the functions officially implemented by WeChat yourself, such as wx.switchTab and other basic functions.
- You need to implement routing management yourself
- It requires a relatively large test cost and the overall implementation cost is relatively large. The specific implementation method will not be demonstrated here. If you are interested, you can find relevant articles by yourself; there are many such articles in the community.
Method 2: Apply the native tabbar customization function and nest your own tabbar component
The specific implementation method is as follows: Step 1: Enable the native custom tabbar function:
// app.json加入以下代码"tabBar": {"custom": true,"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/account/index","text": "我的"}]},
Step 2: Create an empty tabbar in the root directory
// 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.jsComponent({});
// index.json{"component": true}
Step 3: Create your own tabbar component
// 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>
// jsmethods: {/** * 点击tab 切换 * @param e event */handleClick(e: WechatMiniprogram.CustomEvent) {const { path, index } = e.currentTarget.dataset;const { list } = this.data;wx.switchTab({url: path,});},
Step 4: Use the page to use your own tabbar component normally
// wxml
<tab-bar selected="{
{0}}" />
// json
{"usingComponents": {"tab-bar": "../../components/business/tab-bar"}
}
The general idea of the method to solve the problem is these. The advantages of the method are: it can solve the problem that cannot be blocked relatively quickly; and it supports most functions of the native mini program tabbar. The disadvantages of the method are:
- The page life cycle onTabItemTap cannot be triggered and needs to be implemented by yourself.
- The icon will flash once when it is switched for the first time.
Summarize
Compared with method one, method two is much cheaper to implement and is suitable as a temporary solution when time is tight and tasks are heavy. However, overall it is still a hacky way. If you have time, you can implement tabbar yourself. This is the best solution; by the way, I want to complain about why the official community says to use z-index to solve the problem, but it obviously doesn’t work.
Achievements
at last
Recently I found a VUE document that summarizes various knowledge points of VUE and compiled it into "36 Tips You Must Know for Vue Development". The content is relatively detailed, and the explanations of various knowledge points are also very good.
Friends in need can click on the card below to receive it and share it for free