JiangxiMiniProgram/uni_modules/uview-ui/components/u-safe-bottom/u-safe-bottom.vue

<template>
	<view
		class="u-safe-bottom"
		:style="[style]"
		:class="[!isNvue && 'u-safe-area-inset-bottom']"
	>
	</view>
</template>

<script>
	import props from "./props.js";
	/**
	 * SafeBottom 底部安全区
	 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
	 * @tutorial https://www.uviewui.com/components/safeAreaInset.html
	 * @property {type}		prop_name
	 * @property {Object}	customStyle	定义需要用到的外部样式
	 *
	 * @event {Function()}
	 * @example <u-status-bar></u-status-bar>
	 */
	export default {
		name: "u-safe-bottom",
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		data() {
			return {
				safeAreaBottomHeight: 0,
				isNvue: false,
			};
		},
		computed: {
			style() {
				const style = {};
				// #ifdef APP-NVUE
				// nvue下，高度使用js计算填充
				style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				// #endif
				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
			},
		},
		mounted() {
			// #ifdef APP-NVUE
			// 标识为是否nvue
			this.isNvue = true;
			// #endif
		},
	};
</script>

<style lang="scss" scoped>
	.u-safe-bottom {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
	}
</style>