解决小程序底部导航在iphone x及以上机型上安全区域的适配问题@令狐张豪

问题点：小程序底部导航如果写固定的位置在安卓系统上是没有问题的，但是在iPhone X及以上机型有安全区域的机器上就显得有点太靠下了，我们可以写成动态的：

解决思路：判断是Android 还是 iOS，底部导航默认bottom为0，动态去改变bottom。

使用框架：uni-app

1. 文件名：App.vue

<script>
	export default {
		globalData: {
			isIphone: false
		},
		onLaunch: function() {
			this.getSystem();
		},
		onShow: function() {},
		methods: {
			getSystem() {
				//获取设备信息
				let that = this
				wx.getSystemInfo({
					success(res) {
						let system = res.system.indexOf('iOS');
						var flag = false; //是否X以上机型
						flag = res.statusBarHeight > 20
						if (flag && system == 0) {
							that.globalData.isIphone = 'bottom:30rpx'; // 可手动更改底部高度
						}
					}
				})
			}
		}
	}
</script>

<style>
	/*每个页面公共css */
	view,
	text,
	image {
		box-sizing: border-box;
	}
</style>

2. 底部导航使用（index.vue）

<template>
	<view>
		<view class="footer" :style="bottom">
			<view class="my-order">我的订购单</view>
			<view class="right-btn" v-if="cartData.length === 0">
				<text>还没有订购产品</text>
				<text>下单</text>
			</view>
			<view class="right-btn2" v-else>
				<text>{{sum}}</text>
				<text>采购总数量</text>
				<text @click="toOrder">下单</text>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data(){
			return {
				bottom: 0,
			}
		},
		created() {
			this.bottom = app.globalData.isIphone;
		},
	
	}
</script>

<style scoped lang="scss">

</style>

效果图：

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~