创建setIOSAreaMixin.js文件

import {mapState,mapMutations
} from 'vuex'export default {computed: {...mapState("ios_area", ["globalAreaClass", 'isSafeAreaCalculated'])},mounted() {if (!this.isSafeAreaCalculated) {this.calculateSafeAreaClass();this.setSafeAreaCalculated(true)}},methods: {...mapMutations("ios_area", ["setSafeAreaCalculated", 'setGlobalClass']),calculateSafeAreaClass() {// 获取设备信息let result =  uni.getSystemInfoSync().osName// 判断设备类型if (result == 'ios' ) {// 计算安全区域类名const safeAreaClass = 'setIosArea'; // 根据你的需求定义类名// 更新 Vuex 中的数据this.setGlobalClass(safeAreaClass)} else {// 非iOS设备时清空类名this.setGlobalClass('')}},},
};import {mapState,mapMutations
} from 'vuex'export default {computed: {...mapState("ios_area", ["globalAreaClass", 'isSafeAreaCalculated'])},mounted() {if (!this.isSafeAreaCalculated) {this.calculateSafeAreaClass();this.setSafeAreaCalculated(true)}},methods: {...mapMutations("ios_area", ["setSafeAreaCalculated", 'setGlobalClass']),calculateSafeAreaClass() {// 获取设备信息let result =  uni.getSystemInfoSync().osName// 判断设备类型if (result == 'ios' ) {// 计算安全区域类名const safeAreaClass = 'setIosArea'; // 根据你的需求定义类名// 更新 Vuex 中的数据this.setGlobalClass(safeAreaClass)} else {// 非iOS设备时清空类名this.setGlobalClass('')}},},
};

Vuex中存储

export default {namespaced: true,state: {isSafeAreaCalculated: false,globalAreaClass: '',},mutations: {setSafeAreaCalculated(state, value) {state.isSafeAreaCalculated = value;},setGlobalClass(state, value) {state.globalAreaClass = value;},},
}

main.js中全局混入

import setIOSAreaMixin from './mixin/setIOSAreaMixin'
Vue.mixin(setIOSAreaMixin);

 页面中使用

<view class="footer"  :class="globalAreaClass"><u-button type="warning" :custom-style="customStyle" hover-class="none" @click="chongZhi">确认充值</u-button></view>

css

.setIosArea {padding-bottom: calc(constant(safe-area-inset-bottom)/(1.5)) !important;padding-bottom: calc(env(safe-area-inset-bottom)/(1.5)) !important;}