Solution of vant tabbar blocking content

As we mentioned earlier , Use vant-tabbar To replace the native tabbar, But it is found in actual use , When tab After too much page content ,tabbar It will block the content at the bottom of the page

Directly above ：

We will find that , Two buttons disappeared , from 2 Can be seen at , Right side of the screen scroll Over tabbar One column , The content is covered , It did slide to the bottom, but I couldn't see the button .

Why is this so ？ Custom components of applets , It's through slot The content is injected into it and then rendered , and vant-tabbar Components are adopt cover-view In the form of Views overlaid on native components , It is not a reference component in the usual sense , Therefore, it is not a peer relationship with content elements .

At first I thought that since I was tabbar cover Live in an area , Then I'll find it tabbar Height of components , Then put the bottom element on top ？

Pictured above , Did find it ,vant The default is 50px, But the fixing effect is worrying , If you are interested, you can try . I guess it's because there is still a safe distance at the bottom of the component , So this height Not exactly equal to tabbar Occupation height of , Secondly, it will also be affected by the model .

During this period, I also tried another way , use scroll-view The label wraps the content , Then set a fixed height , such as 500px, In this way, the sliding content is not affected tabbar influence , Because the regions do not intersect . But it is also affected by the model .

Therefore, the final choice is to use the form of percentage to top up a distance , That is to say ：

<view style="padding-bottom: 25%;"></view>

Look at the actual effect ：

Most of the models tested are fairly ok. The disadvantage is that everyone has tabbar The page of , Need to add a blank view, Not very elegant . So I consider whether I can directly modify the custom components , stay slot Add directly before and after view, Or set it directly slot Style controls internal elements , But it didn't work , So stop .

Only try to jump to a new page and hide tabbar To avoid this . If you find a better way later , Updates will be synchronized , You are also welcome to tell me , thank ~

The full code is in github On , Ongoing update , welcome star Support ：https://github.com/Joy917/signgo