文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序自定义状态栏

2024-04-02 19:55

关注

本文实例为大家分享了微信小程序自定义状态栏的具体代码,供大家参考,具体内容如下

首先我们需要在json文件中修改一下配置。如果我们只需要在一个页面使用自定义状态栏,我们可以在这个页面的json文件中修改;如果所有页面都需要使用,我们直接在app.json中修改。

"navigationStyle": "custom",

wxml:

<view class="bgcItem" style="height:{{sumHeight}};">
    <view class="head" style="height:{{headHeight}};top:{{headTop}}">
      <image src="../../static/image/adress.png"></image>
      <view>{{appname}}</view>
    </view>
</view>

wxss:

.bgcItem{
  top: 0rpx;
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 999;
}
.head{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 130rpx;
  text-align: center;
  position: fixed;
  top: 0rpx;
  left: 0;
  z-index: 999;
  background-color: #fff;
}
 
.head>image {
  width: 24rpx;
  height: 24rpx;
  margin-left: 30rpx;
}
 
.head>view {
  font-size: 28rpx;
  color: #1a1a1a;
  margin-left: 8rpx;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

wx.getSystemInfo是获取系统信息的API

wx.getSystemInfo({
    success(res) {
      // res是设备信息
      // menuButton是右边胶囊按钮的信息
      let menuButton = wx.getMenuButtonBoundingClientRect()
      let titleBarHeight = (menuButton.top - res.statusBarHeight) * 2 + menuButton.height 
      this.setData({
      headHeight: titleBarHeight * 2 + 'rpx',
      headTop: res.statusBarHeight * 2 + 'rpx',
      sumHeight: titleBarHeight * 2 + res.statusBarHeight * 2 + 'rpx'
       })
     }
  })

图片中的(1)是menuButton.top

图片中的(2)是res.statusBarHeight

那我们求(3)怎么算呢?  是不是(1) - (2)呢? 

即menuButton.top - res.statusBarHeight;那为什么乘2呢? 是不是胶囊按钮下面还有一段距离,   也就是和(3)相等的距离,所以乘2。

既然我们把(3)求出来了,那我们想得到什么值就得到什么值了。

比如求整体的高度就是:(menuButton.top - res.statusBarHeight) * 2 + menuButton.height + res.statusBarHeight。

我们也可以把上面的代码写在app.js的onLaunch函数中

// 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
 onLaunch: function () {
   wx.getSystemInfo({
     success(res) {
       // res是设备信息
       // menuButton是右边胶囊按钮的信息
       let menuButton = wx.getMenuButtonBoundingClientRect()
       let titleBarHeight = (menuButton.top - res.statusBarHeight) * 2 + menuButton.height 
       + res.statusBarHeight
       this.globalData.titleBarHeight = titleBarHeight
      }
    })
  },

我们可以将计算好的值存在globalData中,globalData是在app.js中定义。

我们在小程序初始化的时候计算好,并且将值也存在了globalData中,在其他页面使用的时候我们可以直接写

var App = getApp();
onLoad: function (options) {
    this.setData({
      titleBarHeight: App.globalData.titleBarHeight
    })
 },

那么titleBarHeight就是我们计算好的值,我们可以直接使用了。 

还有一种不需要使用自定义状态栏的,我们只想修改状态栏的颜色,那这个是很简单的。我们可以直接在json里写上

"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#ff00ff"

效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯