The content at the bottom of the uni-app front-end H5 page is blocked by the tabbar

insert image description here
If you want to float a menu above the native tabbar, write bottom:0 before. After such writing is compiled into h5, the menu will overlap with the tabbar and be located at the bottom of the screen.
Original code:

<view style="position: fixed;bottom:0;left: 0;background-color: #007AFF;
		right: 0;height: 100rpx;line-height: 106rpx;z-index: 99;">
			<view class="d-flex j-sa a-center">
				<label class="radio">
					<radio @tap="checkall" :checked="checkedall" color="#ee5f0d" />
					<text>全选</text>
				</label>
				<text>合计:{
   
   { totalmoney }}yuan</text>
				<text @tap="topay">结算</text>
			</view>
		</view>

insert image description here

uniapp adds two properties:

--window-top 
--window-bottom

The navigation bar and tabbar of APP and applet are native controls, and the coordinates of the element area do not include the native navigation bar and tabbar; while the navigation bar and tabbar in H5 are realized by div simulation, so the element coordinates will include the navigation bar and tabbar high

insert image description here
Use: bottom:var(–window-bottom);
I wrote bottom: 0 at the beginning; here, it is not executed. But adding more padding-bottom can be done.
padding-bottom: var(–window-bottom);

insert image description here
If the height is not enough, you can use:

padding-bottom: calc(var(–window-bottom) + 20px);

  1. The var(–status-bar-height) variable is fixed at 25px in the WeChat applet environment, and is the actual status bar height of the phone in the App.
  2. When "navigationStyle": "custom" is set to cancel the native navigation bar, the form is immersive and occupies the position of the status bar. At this point, you can use a view with a height of var(–status-bar-height) to place it at the top of the page to prevent the page content from appearing in the status bar.
  3. Since there is no native navigation bar and tabbar on the H5 side, it is also a front-end div simulation. If a fixed-position bottom view is set, it will be above the tabbar on the applet and App side, but it will overlap the tabbar on the H5 side. At this time, --window-bottom can be used, no matter which end it is, it is fixed above the tabbar.
  4. At present, nvue does not support the --status-bar-height variable on the App side. The alternative is to obtain the height of the status bar through uni.getSystemInfoSync().statusBarHeight when the page is onLoad, and then set the placeholder view through style binding high.

Guess you like

Origin blog.csdn.net/qq_31676483/article/details/129062195