Home WeChat Applet Mini Program Development Problems and solutions related to tabbar page display in mini program development

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

Apr 17, 2017 am 10:42 AM
tabbar 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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1266
29
C# Tutorial
1239
24
PHP permission management and user role setting in mini program development PHP permission management and user role setting in mini program development Jul 04, 2023 pm 04:48 PM

PHP permission management and user role setting in mini program development. With the popularity of mini programs and the expansion of their application scope, users have put forward higher requirements for the functions and security of mini programs. Among them, permission management and user role setting are An important part of ensuring the security of mini programs. Using PHP for permission management and user role setting in mini programs can effectively protect user data and privacy. The following will introduce how to implement this function. 1. Implementation of Permission Management Permission management refers to granting different operating permissions based on the user's identity and role. in small

PHP page jump and routing management in mini program development PHP page jump and routing management in mini program development Jul 04, 2023 pm 01:15 PM

PHP's page jump and routing management in mini program development With the rapid development of mini programs, more and more developers are beginning to combine PHP with mini program development. In the development of small programs, page jump and routing management are very important parts, which can help developers achieve switching and navigation operations between pages. As a commonly used server-side programming language, PHP can interact well with mini programs and transfer data. Let’s take a detailed look at PHP’s page jump and routing management in mini programs. 1. Page jump base

PHP security protection and attack prevention in mini program development PHP security protection and attack prevention in mini program development Jul 07, 2023 am 08:55 AM

PHP security protection and attack prevention in mini program development With the rapid development of the mobile Internet, mini programs have become an important part of people's lives. As a powerful and flexible back-end development language, PHP is also widely used in the development of small programs. However, security issues have always been an aspect that needs attention in program development. This article will focus on PHP security protection and attack prevention in small program development, and provide some code examples. XSS (Cross-site Scripting Attack) Prevention XSS attack refers to hackers injecting malicious scripts into web pages

How to implement small program development and publishing in uniapp How to implement small program development and publishing in uniapp Oct 20, 2023 am 11:33 AM

How to develop and publish mini programs in uni-app With the development of mobile Internet, mini programs have become an important direction in mobile application development. As a cross-platform development framework, uni-app can support the development of multiple small program platforms at the same time, such as WeChat, Alipay, Baidu, etc. The following will introduce in detail how to use uni-app to develop and publish small programs, and provide some specific code examples. 1. Preparation before developing small programs. Before starting to use uni-app to develop small programs, you need to do some preparations.

Implementation method of drop-down menu developed in PHP in WeChat applet Implementation method of drop-down menu developed in PHP in WeChat applet Jun 04, 2023 am 10:31 AM

Today we will learn how to implement the drop-down menu developed in PHP in the WeChat applet. WeChat mini program is a lightweight application that users can use directly in WeChat without downloading and installing, which is very convenient. PHP is a very popular back-end programming language and a language that works well with WeChat mini programs. Let's take a look at how to use PHP to develop drop-down menus in WeChat mini programs. First, we need to prepare the development environment, including PHP, WeChat applet development tools and servers. then we

PHP data caching and caching strategies in small program development PHP data caching and caching strategies in small program development Jul 05, 2023 pm 02:57 PM

PHP data caching and caching strategies in mini program development With the rapid development of mini programs, more developers are beginning to pay attention to how to improve the performance and response speed of mini programs. One of the important optimization methods is to use data caching to reduce frequent access to the database and external interfaces. In PHP, we can use various caching strategies to implement data caching. This article will introduce the principles of data caching in PHP and provide sample codes for several common caching strategies. 1. Data caching principle Data caching refers to storing data in memory to

How to implement custom bottom menu and TabBar in UniApp How to implement custom bottom menu and TabBar in UniApp Jul 05, 2023 am 09:57 AM

UniApp is a cross-platform development framework based on Vue.js, which can be used to develop applications for multiple platforms such as iOS, Android, and applets. In UniApp, it is a common requirement to implement customized bottom menu and TabBar. This article will introduce how to use UniApp to implement custom bottom menu and TabBar methods, and attach corresponding code examples. First, we need to create a UniApp project. Open the UniApp development tool, choose to create a new project and fill in the

PHP page animation effects and interaction design in mini program development PHP page animation effects and interaction design in mini program development Jul 04, 2023 pm 11:01 PM

Introduction to PHP page animation effects and interaction design in mini program development: A mini program is an application that runs on a mobile device and can provide an experience similar to native applications. In the development of mini programs, PHP, as a commonly used back-end language, can add animation effects and interactive design to mini program pages. This article will introduce some commonly used PHP page animation effects and interaction designs, and attach code examples. 1. CSS3 animation CSS3 provides a wealth of properties and methods for achieving various animation effects. And in small

See all articles