uniapp 兼容IOS手機(jī)底部黑線 IOS蘋果手機(jī)有很多款手機(jī)底部都有一條黑線。底部的tabbar 導(dǎo)航欄如果遇到IOS手機(jī)則會出現(xiàn)問題。 因?yàn)槲疫@邊的tabbar導(dǎo)航欄是自己寫的，不是用的uniapp自帶的，所以如果遇到IOS手機(jī)底部有黑線的這種，需要將tabbar導(dǎo)航欄的高度調(diào)整一下才可以。 除此之外還有些頁面，底部有個(gè)按鈕之類的，也是需要做兼容處理的。

uni-app：iPhone的底部安全區(qū)域

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

uni.getSysteminfo({
  success: res => {
    let safeArea = res.safeAreaInsets.bottom;
  }
})

該APi返回一個(gè)對象，包含 top right bottom left width height，其中bottom為安全區(qū)域高度 對應(yīng)的兼容情況如下，uni-app的版本2.5.3+使用safeAreaInsets值 safeArea 在豎屏正方向下的安全區(qū)域 App、H5、微信小程序 safeAreaInsets 在豎屏正方向下的安全區(qū)域插入位置（2.5.3+） App、H5、微信小程序

uniapp自定義tabBar方案

一、pages.json文件中添加tarBar

二、把原生的tabBar隱藏起來

三、自定義一個(gè)tabBar組件

? ? ? ? //重點(diǎn)代碼

????????height: 50px;
?? ??? ?padding-bottom: env(safe-area-inset-bottom); // 適配iphoneX的底部
?? ??? ?padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

<template>
	<view class="tab-bar">
		<view
			v-for="(item, index) in list"
			:key="index"
			class="tab-bar-item"
			@click="switchTab(item, index)"
		>
			<image
				class="tab_img"
				:src="selected === index ? item.selectedIconPath : item.iconPath"
			></image>
			<view class="tab_text" :style="{ color: selected === index ? selectedColor : color }">
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		selected: {
			// 當(dāng)前選中的tab index
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			color: '#A1A1A1',
			selectedColor: '#F8A400',
			list: [
				{
					pagePath: '/pages/pointsMall/pointsMall',
					text: '商城',
					iconPath: '/static/tab_icons/cate.png',
					selectedIconPath: '/static/tab_icons/cate-active.png'
				},

				{
					pagePath: '/pages/mine/mine',
					text: '我的',
					iconPath: '/static/tab_icons/my.png',
					selectedIconPath: '/static/tab_icons/my-active.png'
				}
			]
		};
	},
	methods: {
		switchTab(item, index) {
			console.log('item', item);
			console.log('index', index);
			uni.reLaunch({
				url: item.pagePath
			});
		}
	}
};
</script>

<style lang="scss">
.tab-bar {
	position: fixed;
	bottom: -1px;
	left: 0;
	right: 0;
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;

	border-top-right-radius: 20px;
	.tab-bar-item {
		height: 50px;
		padding-bottom: env(safe-area-inset-bottom); // 適配iphoneX的底部
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
		background: white;
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;

		.tab_img {
			width: 50rpx;
			height: 50rpx;
		}

		.tab_text {
			font-size: 20rpx;
			margin-left: 9rpx;
		}
	}
}
.tab-bar-item:first-child {
	border-top-right-radius: 20px;
}
.tab-bar-item:last-child {
	border-top-left-radius: 20px;
}
</style>

四、引用組件

五、路由跳轉(zhuǎn)

文章來源地址http://www.zghlxwxcb.cn/news/detail-486893.html

到了這里，關(guān)于uniapp h5 tabBar兼容IOS手機(jī)底部黑線的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！