微信小程序固定底栏适配全面屏
如果你的小程序页面按钮有用fixed定位到底部的话,那你一定会遇到兼容全面屏的坑(与底部横条重叠)。查了下文档,发现能用的就只有一个api 而已。
下面准备封装全局app.js方法
/** * 判断设备是否为全面屏 */ checkFullSucreen: function () { const self = this wx.getSystemInfo({ success: function (res) { // 根据 屏幕高度 进行判断 if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) { self.globalData.isFullSucreen = true } // 根据手机型号匹配 if (res.model.search('iPhone X') != -1) { self.globalData.isFullSucreen = true } } }) },
然后在onLaunch方法调用它吧
在有 fixed 定位的页面 data 中判断下
this.setData({ isFullSucreen: App.globalData.isFullSucreen, //判断机型 })
然后是两个 css 样式
.fix-Full-button { bottom: 68rpx !important; } .fix-Full-button::after { content: ' '; position: fixed; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 68rpx !important; width: 100%; background: #fff; }
最后在模板中,底栏 class 中增加一处判断就 ok
{{isFullSucreen?'fix-Full-button':''}}
例如:
<view class="flow-fixed-footer b-f m-top10 {{isFullSucreen?'fix-Full-button':''}}">
评论
梦凡
回复6666666666
流氓凡
回复@梦凡 哦哦哦