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

她似晚风般温柔7892023-10-04 18:26

tabbar 被购物车结算遮挡

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

原代码

css 复制代码

// 底部结算样式
	.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;
		}
	}

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

css 复制代码

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