微信小程序自定义底部导航全面屏自适应

2021-10-10   阅读:2213   类型:后端   分类:微信小程序    标签: 微信小程序

如果我们自定义底部导航,会发现底部导航会被挡住一部分,我们可以使用下面的方法来解决这个问题。

全局app.js加入判断设备是否全面屏方法:

  /**
     * 判断设备是否为全面屏
     */
    checkFullSucreen: function () {
      const self = this
    wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        // 根据 屏幕高度 进行判断
        if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) {
          self.globalData.isFullSucreen = true
        }
      }
    })
  },

2、在app.js中onLaunch调用方法

onLaunch() {
    this.checkFullSucreen()
  },

3、app.js中的globalData中定义变量

globalData: {
    isFullSucreen: false, // 当前设备是否为 FullSucreen
  },

4、在需要适应的页面data里面定义变量

var app = getApp();//获取应用实例
Page({
  data: {
    isFullSucreen: app.globalData.isFullSucreen ? true : false, //判断机型
  }
 })

5、wxml文件里加入如下判断

  <view class="fixed_footer {{isFullSucreen?'fix-Full-button':''}}"></view>

6、在全局wxss中加入我们的样式

/* 适配全面屏 */
.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;
}
【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/834.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×