微信小程序適配iPhone X主要針對fix定位到底部的區域,比如詳情頁或購物車底部的按鈕欄,會與iPhone X的Home Indicator
橫條重疊,這樣在點擊下方按鈕時很容易誤觸發手勢操作,如下圖:
mpvue中適配方法:
1.獲取設備信息
/**
* 獲取設備信息
* @returns {Promise<any>}
*/
export function wechatGetSystemInfo () {
return new Promise((resolve, reject) => {
wx.getSystemInfo({
success: (res) => {
resolve(res)
}, fail: (err) => {
reject(err)
}
})
})
}
2.設置css樣式
.view-fix-iphonex {
bottom: ~'60rpx' !important;
}
.view-fix-iphonex::after {
content: ' ';
position: fixed;
bottom: 0 !important;
height: ~'60rpx' !important;
width: 100%;
background: #fff;
}
3.設置一個標識符isIpx
存在vuex中,在小程序初始化完成時判斷
在 App.vue
中處理
<script>
import wx from 'wx'
import { mapGetters, mapActions } from 'vuex'
import { wechatGetSystemInfo } from './utils/weappUtils'
export default {
onLaunch () {
this.isIphoenX()
},
computed: {
...mapGetters(['isIpx'])
},
methods: {
//判斷設備是否是iphoneX
isIphoenX () {
wechatGetSystemInfo().then(res => {
const deviceModel = 'iPhone X'
let isIpx = false
if (res.model.indexOf(deviceModel) > -1) {
isIpx = true
}
if (this.isIpx !== isIpx) {
this.setIsIpx(isIpx)
}
}).catch(err => {})
},
...mapActions(['setIsIpx'])
}
}
</script>
4.在需要適配的頁面中設置
如在 demo.vue
中處理
<template>
<div class="fix-view"
:class="isIpx?'view-fix-iphonex':''"
>
吸附在底部的區域
</div>
</template>
<script>
import wx from 'wx'
import {mapGetters} from 'vuex'
export default {
computed: {
...mapGetters(['isIpx'])
},
}
</script>
<style lang="less">
.fix-view {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: ~'100rpx';
line-height: ~'100rpx';
box-sizing: border-box;
text-align: right;
display: flex;
justify-content: end;
background: #fff;
}
</style>