Problems and solutions related to tabbar page display in mini program development

Yesterday during the development process of the WeChat applet, I encountered a situation where the tabbar was clearly defined, but it was never displayed. Searching on the Internet, I found that if there are students who have used tabbar during the development of WeChat applet, many of them also encountered the same

problems. Why sometimes the tabbar has been added to app.json in the code, but it is not displayed on the page? Can some pages display tabbars and some pages not display tabbars?

Today I will sort out the problems I encountered during the development process and share with you a small program development tutorial.

Question 1: Why is the tabbar not displayed at the bottom of the page?

Many netizens (including myself) have also encountered this kind of problem. I would like to remind everyone to think carefully and check whether the writing is correct! is written correctly as tabBar, do not write it as tabbar! If it is confirmed that the writing is correct, clearly adds tabbar in app.json, and

also adds path in list, why is it not displayed? For example, in the following code, why does the tabbar not appear at the bottom of the screen as expected?

## "pages":[

"pages/clickDemo/clickDemo",

"pages/logs/logs",

"pages/index/index",

"pages/mypage/mypage"

],

"window": {

"backgroundTextStyle": "dark ",

"navigationBarBackgroundColor": "#ddd",

"navigationBarTitleText": "Tabbar Demo",

"navigationBarTextStyle": "black ",

"backgroundColor": "#ff0000"

},

"tabBar": {

"color": "#000000",

"borderStyle": "#000",

"selectedColor": "#9999FF",

"list": [

{

"pagePath": "pages/index/index",

"text": "Homepage",

"iconPath": "image/location_normal.png",

"selectedIconPath": "image/location_selected.png"

},

{

"pagePath": "pages/logs/logs",

"text": "Settings",

"iconPath": "image/setting_normal.png",

"selectedIconPath": "image/setting_selecred.png"

}

]
}
}
Let’s take a look at the page display results as follows: The reason is: The first item of the pages array must be a member of the tabBar's list array. We can look at the contents of the pages array in the above code:

"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
The content of the list array in tabbar is:

"list": [
{
"pagePath": "pages/index/index",
"text": "Homepage",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "Settings",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}
Have you noticedWhy the TabBar does not appear at the bottom? The reason is that the first item "pages/clickDemo/clickDemo" in the pages array in the head of app.json has not become a member of tabBar, that is, there is no link click# in the list array of tabBar.
## Entries on the Demo page. 【Solution 1】.We add entries linking to the clickDemo page in the list array. This code is given below.
##{
"pagePath": "pages/clickDemo/clickDemo",
"text": "EventDemo",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}
The effect is as follows:

[Solution 2]. Set the first item of the pages array to "pages/index/index", Or set to "pages/logs/logs". Of course this method is not what we expected to see. After practice, we found that the first item (homepage) in the pages array in app.json must appear in the tabBar---list array. It doesn't matter which one is in the list; but if the homepage is not in the list, of course it cannot be rendered. This is It can be understood that app.json is configured for the first time. Display tabbar on non-home page?
I haven’t thought of a solution for this yet, and I haven’t found any answers to related questions on the Internet. Everyone is welcome to help.

Question 3: Some pages are not in the tabbar list page. Why is the tabbar also displayed at the bottom of the page? If you redirectTo from a first-level page to another page, you will find that TabBar will be displayed even if other pages are not in the list defined by TabBar. How to solve this problem?

##[Solution]

If the current page is also a first-level page, go to the page you want to jump to When the page you are going to does not have a Tabbar, just use navigateTo instead of redirectTo.

Question 4: Sometimes the wx.navigateTo event of the button button is added to the new page, but I don’t know why it cannot jump. Only by removing the tabBar can you jump to

?

【Solution】

I believe many people have encountered this situation. After my own actual exploration, I found that if the page to be jumped belongs to the TabBar, wx.navigateTo will be invalid. If you want to switch, you need to use wx.switchTab. But one thing to note is that if you use wx.switchTab, there will be no return button. Of course, there is a navigator tag similar to the a tag in the mini program, which is used for jump processing.

Jump to new page Jump Go to the current page

The above is the detailed content of Problems and solutions related to tabbar page display in mini program development. For more information, please follow other related articles on the PHP Chinese website!