What is the Best Practice for Making a Customized TabBar in Goji.js?

[Ziyu-Chen]

Hi! It's me again! I'm trying to create a TabBar myself instead of using the native WeChat mini-program TabBar which is not customizable and a lot of pain to work with. I'm using the navigator component to build my TabBar, but whenever I click on an navigator, a scroll animation occurs and my TabBar disappears for a second before the next page appears. I have already tried creating a custom-tab-bar folder to store my TabBar as mentioned in WeChat mini-program's official documentation but it just doesn't work in my Goji.js Project. Is there any way I can stop the scroll animation (which typically happens during a page transition) from being applied to my TabBar without making my mini-program a single-page application? Thank you in advance!

[malash]

Hi @Ziyu-Chen

To be honest, I do not quite understand what the problem is. I haven't used the customized tabbar in this way and don't have enough context about this part.

Here are some suggestions that you could take that would make it easier to communicate.

1. Could you upload a reproduce demo to Github and link it here ?

2. May you attach some static screenshots or dynamic GIFs ? A picture is worth 1,000 words.

3. It could be better if you can describe the issue in a structured way. Feel free to chose an issue template like this.

Thanks!

[Ziyu-Chen]

Hi @malash! Sorry for the confusion! I don't have much experience submitting issues before. Let me restructure my issue.

Expected Behavior:
Customized TabBar is stuck to the bottom and never disappears.

Current Behavior:
Customized TabBar disappears with the current page whenever there's a page transition. (Scroll Animation)

Possible Solutions:

1. custom-tab-bar: A custom-tab-bar can be set up in a native WeChat mini-program but it requires the native app to have a "custom-tab-bar" folder at the same level as the pages folder. Even though I tried adding a "custom-tab-bar" folder in the src folder of my Goji.js project, this folder and the files in it just never get compiled.
   source: https://www.jianshu.com/p/91cd8db69739

2. Making the mini-program a single page application: This will definitely do away with the scroll animation altogether. However, I have to change the structure of my app just to fit a customized TabBar and it might cause future contributors to my app a lot of confusion.
   source: https://github.com/evenyao/wx-diy-tabbar

3. Some smart Goji/Airbnb way that I don't know yet?

Context (Environment):
Goji.js. Customized TabBar (composed of navigator components) used instead of WeChat mini-program's native TabBar.

Description:
The following is the code that I wrote for my TabBar. It contains multiple Navigators to the main pages, and it is displayed on the main pages.

Looking forward to your answer!