踩坑日记 uniapp 底部 tabber遮挡住购物车结算

tabbar 被购物车结算遮挡

在小程序上tabbar没有将固定栏遮挡，如果直接调高，浏览器H5页面是对了，但在小程序上面离底部的定位就太高了

• 原代码

// 底部结算样式
	.shop-foot {
		border-top: 2rpx solid #F7F7F7;
		background-color: #FFF;
		position: fixed;
		bottom: 0;	// 这里给 bottom:0 H5 直接看不见了
		left: 0;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		display: flex;
	}

	// 购物车样式
	.shop-item {
		display: flex;
		padding: 20rpx;
		align-items: center;
		background-color: #F7F7F7;
		margin-bottom: 10rpx;

		.shop-image {
			width: 200rpx;
			height: 180rpx;
		}

		.shop-text {
			flex: 1;
		}

		.shop-color {
			margin-top: 10rpx;
			font-size: 28rpx;
		}

		.shop-price-num {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

• 修改参数 bottom 这样就能看见了

bottom: var(--window-bottom,0);	
1