//app.vue
//設(shè)備信息
onLaunch: async function () {
let app = uni.getSystemInfoSync();
console.log('設(shè)備信息', app)
let top = app.safeArea.top //屏幕頂部安全距離
let height = app.safeAreaInsets.bottom //屏幕底部安全距離
}
//vux 保存上面獲取到的兩個(gè)變量
this.set_top(top);
this.set_safeAreaBottom(height);
methods: {
...mapActions(['setLogined', 'removeLogined']),
...mapMutations(['set_safeAreaBottom', 'set_top'])
},//vuex
const store = new Vuex.Store({
state: {
safeAreaBottom: 0,
top: 0,
mutations: {
set_safeAreaBottom (state, data) {
state.safeAreaBottom = data
},
set_top (state, data) {
state.top = data
},
},
actions: {
....
}
})//這里dom結(jié)構(gòu)我舉個(gè)例子，僅供參考
<view class="safeArea" :style="{ 'padding-bottom': `${safeAreaBottom + 114}` + 'rpx' }">
<view class="content">
</view>
//底部
<view class="flex justify-around bg-white" style="width:100%;height: 100rpx;">
</view>
</view>上面dom結(jié)構(gòu)的，根據(jù)需求是這樣的：整個(gè)屏幕被兩個(gè)view占滿，其中底部view是固定在底部不動(dòng)的，content內(nèi)容立馬是高度盛滿剩下屏幕高度，并且overflow：scorll ； safeArea里面的動(dòng)態(tài)樣式中的safeAreaBottom是vuex保存的值，后面加的114，是底部高度再略高一點(diǎn)：“100+14” ，其中14你給不給隨意。文章來源：http://www.zghlxwxcb.cn/news/detail-517768.html
.safeArea {
height: 100%;
// padding-bottom: var(--safeAreaBottom);
}
.content {
height: 100%;
overflow-y: scroll;
}寫到這里就沒啦~ 手機(jī)頂部的安全距離 等有需求碰到了我再過來詳細(xì)記錄~~ 值已經(jīng)在上面獲取到了，就是vuex保存的top變量的值。文章來源地址http://www.zghlxwxcb.cn/news/detail-517768.html
到了這里，關(guān)于uniapp開發(fā)小程序，設(shè)置iphone底部安全區(qū)域的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
