How can Mini Program's custom tabbar not flicker like the native one? - Codes Helper - Programming Question Answer

How can Mini Program's custom tabbar not flicker like the native one?

now the custom tabbar encapsulates a component

<view class="tabbar-bottom-container">
      <navigator open-type="redirect" url="/pages/index/index" hover-class="none" class="item selected"><view class="item"></view></navigator>
       <navigator open-type="redirect" url="/pages/index/index" hover-class="none" class="item"><view class="item"></view></navigator>
        <navigator open-type="redirect" url="/pages/index/index" hover-class="none" class="item"><view class="item"></view></navigator>
         <navigator open-type="redirect" url="/pages/index/index" hover-class="none" class="item"><view class="item"></view></navigator>
          <navigator open-type="redirect" url="/pages/index/index" hover-class="none" class="item"><view class="item"></view></navigator>
</view>

probably because there are five native restrictions and style restrictions, I want to customize
, but because it is skipped, it flashes
. It cannot only load content as configured in app.json. Tabbar is fixed

.

ask the Great God for advice on how to achieve this

Jun.16,2021

turn Mini Program into a single-page application, and the page jump is transformed into the replacement of the component template in the page. Tabbar is just a part of the page that is fixed and will not be replaced. Of course, you can also be like Mini Program's normal page structure, do a multi-page Mini Program, as long as there is a tabbar, you can also assemble these pages into a page.

if you are still not clear about this, you can refer to a Mini Program I wrote earlier: the source address of the micro assistant is https://github.com/nanhupatar.

.

you can refer to the practice of slidebar

the best way is to make a componentized single page, Mini Program, with clear structure and convenient iteration

btw: Welcome to follow my Wechat official account: Front end Guide . If the answer is useful to you, please adopt it

.

Previous: The button button under Firefox has a child element canvas to bind the click event to canvas, and the click is invalid. What is the reason for this?

Next: Position:fixed failed after using animate, and the positioning datum became an element using animate.

Can Mini Program's template information only be sent to the user who submitted the form?
recently, we are going to do a leave function. Student A submitted an application for leave, which was then reviewed by teacher B, but later I found that I needed a reminder function on Wechat s message end. It seems that Wechat can only use template me...

Mini-Program WeChat-Mini-Programs

Feb.26,2021
Can WeChat Mini Programs identify Mini Program who the user entered from a certain scene or channel?
do you want to know whether Mini Program and Mini Program, whose users enter from a specific channel, have such a function or method ...

WeChat-Mini-Programs Mini-Program

Feb.26,2021
WeChat Mini Programs searches the content of a page, is there any way to achieve keyword highlighting?
the text matched by the search box above an article is highlighted to realize the idea. ...

Front-end javascript Mini-Program

Feb.26,2021
WeChat Mini Programs limit the number of navigator
The component of navigator has a limit on the number of jumps. I now have a project tabbar to write by myself, so it is inevitable to add navigator jump to it, but if there are too many pages to jump, there will be a jump limit. ...

WeChat Mini Programs

Feb.26,2021
After Mini Program shared it, others clicked on it, how to get back to the home page?
for example, the details page, after sharing, other people open, can only see this page, I did not find a useful way to set API back to a route. You have to write it on the page? ...

Javascript Mini-Program

Feb.26,2021
How does Mini Program realize the friend-to-friend mode? the back end is php.
RT how does Mini Program realize the friend-to-friend mode? the back end is php. looking for onlookers to fight. How are these two modes realized? What is the principle? ask the hero for advice. This is the first time to do this ....

Mini-Program php

Feb.26,2021
When WeChat Mini Programs acquires node information, why is it sometimes there and sometimes it is empty?
Custom component life cycle res.height sometimes reports to null ready: function () { var that = this var query = wx.createSelectorQuery().in(this) query.select( .question ).boundingClientRect(function (res) { that.setData({ questionHeight: re...

Mini-Program javascript

Feb.27,2021
Wechat development tools are automatically refreshed to the home page each time they are saved, which is very inconvenient for development. Is there a solution?
for example, if you are editing on another page, you may just change the css style, be refreshed and jump to the front page, and then have to reopen the edit page. It is troublesome to get used to using Wechat developer tools on ctrl+s,. Is my configurat...

Mini-Program Wechat-developer-tool

Feb.27,2021
Why does the image in Mini Program set a fixed width and height to compress the image and deform it?
...

Css Mini-Program

Feb.27,2021
Mini Program generates QR code interface B and asks for advice on what went wrong.
The problem with is that the return has neither error nor data, and the document says it will return binary and convert it to a picture. But now there is nothing. I don t know what went wrong. Ask for help contorller function getIssueQrcodeAction() ...

Php Mini-Program

Feb.27,2021
Mini Program shopping cart
WeChat Mini Programs shopping cart requests shopping cart data in the app.js, and this.carts = app.globalData.carts in the onLoad on the shopping cart page (cart.wxml). on the shopping cart page, there are often operations to select, delete, and modif...

Mini Program

Feb.27,2021
Inside Mini Program, setData has a number, which is rendered by {{}}, and the result is [object Object]
this is the data of setData , how can I render normally? ...

Mini-Program javascript

Feb.27,2021
How does WeChat Mini Programs keep the status of child pages?
I just got in touch with Mini Program developer and recently encountered this problem when I wrote the demo, of a music player. After I returned to the list page from the playback page (or to the home page), I entered the playback page from the entrance...

Mini-Program javascript WeChat-Mini-Programs front-end html5

Feb.27,2021
WeChat Mini Programs's picture is saved to the album.
WeChat Mini Programs s picture is saved to the photo album, api wx.saveImageToPhotosAlbum, which runs normally on the simulator and can be saved, but the error { "errMsg ": "saveImageToPhotosAlbum:fail file not exists "} is displayed in the real machi...

Wechat-developed WeChat-Mini-Programs

Feb.27,2021
Does WeChat Mini Programs need to renew next year?
300 yuan was paid during the audit, and now it is about to expire. I don t know if I want to renew it. There is no text message or email notification, I am afraid that I will not be able to go on it one day. ...

Mini Program

Feb.27,2021
How to use Mini Program scroll-view
I want to implement Mini Program s pull-up and load , but after using scroll-view, one line becomes one. Whether to set this or need to css, for a great solution ...

Scrollview wepy Mini-Program

Feb.27,2021
Does Mini Program's wx.previewImage allow you to add text prompts?
when wx.previewImage implements previewing pictures, long press can bring up options menu. If you want to add a text prompt to the user, you can bring up this menu by long pressing. How to realize ?...

Mini Program

Feb.28,2021
How to get the parameters shared by Aladdin QR code in Mini Program app.js?
how to get the parameters of Aladdin s QR code sharing in Mini Program app.js, be sure to get before login operation....

Mini Program

Feb.28,2021
How does Mini Program relate data to users?
do I want to send openid+ data to the server and write to the database? ...

Mini Program

Feb.28,2021
(how to download code from Tencent Cloud)
I built a new Mini Program on my work computer and uploaded it to Tencent Cloud. When I got home, I wanted to download the client and server folders and continue to write. How can I download it? Thank you! ...

Mini Program

Feb.28,2021

Menu