小程序自定义头部导航栏

index.wxml中设置

<image class="bg" mode="widthFix" src="../../images/invitebg.png"></image>
<view class="customTitle" style="height:{{(globalData.navHeight*2)+4}}rpx">
      <image class="bg" mode="widthFix" src="../../images/invitebg1.png"></image>
      <image style="top:{{backHeight}}rpx;" src="../../images/left.png" bindtap="back"></image>
      <view style="top:{{backHeight}}rpx;">邀请好友</view>
    </view>

index.js中

getTopHeight: function () {
    //获取胶囊位置信息
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    //定义导航位置参数
    var globalData = {
      navHeight: 0,
      navTop: 0,
      windowHeight: 0,
      ww: 0,
      hh: 0,
    }
    var navTop;
    var navHeight;
    //获取手机系统信息
    wx.getSystemInfo({
      success: res => {
        //导航高度
        var statusBarHeight = res.statusBarHeight;
        navTop = menuButtonObject.top;
        navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
        globalData.navHeight = navHeight;
        globalData.navTop = navTop;
        globalData.windowHeight = res.windowHeight;
        //可视窗口宽度
        var ww = res.windowWidth;
        //可视窗口高度
        var hh = res.windowHeight;
        globalData.ww = ww;
        globalData.hh = hh;
        // console.log(globalData)
        //这是我自定义的返回图标位置高度 21单位是 rpx,是图标高度的一半,图标高度为48rpx
        var backHeight = (navTop * 2 + (navHeight - navTop)) - 30;
        this.setData({
          globalData: globalData,
          backHeight: backHeight
        })
      },
      fail(err) {
        console.log(err);
      }
    })
  },

index.json中

{
  "navigationBarTitleText": "邀请好友",
  "navigationStyle":"custom",
  "navigationBarTextStyle": "white",
  "usingComponents": {}
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容