1、全局定义底部安全距离
import { createStore } from 'vuex';
export default createStore<any>({
state() {
return {
safeBottom: ''
};
},
mutations: {
...
},
actions: {
...
},
getters: {
safeBottom: (state) => state.safeBottom
}
});
2、获取设备安全距离
import store from '@/store/index';
export const getSysInfo = () => {
uni.getSystemInfo({
success(system: any) {
store.state.safeBottom = system.screenHeight - system.safeArea.bottom;
}
});
};
...
3、main.ts中引入函数的调用
import { createSSRApp } from 'vue';
import App from './App.vue';
import store from './store/index';
import { getSysInfo } from '@/utils/utils';
export function createApp() {
const app = createSSRApp(App);
app.use(store);
...省略其他
getSysInfo();
return {
app
};
}
4、页面使用
<!-- .vue文件 -->
<template>
<!-- 可根据是否需要安全距离 设置相应样式 -->
<view :style="{ height: safeBottom > 0 ? '176rpx' : '152rpx'}">...省略其他</view>
</template>
<script lang="ts" setup>
import store from '@/store/index';
const safeBottom = computed(() => store.state.safeBottom);
</script>