回复 刷新

暂无评论

小程序自定义头部navbar组件

首先先编写导航栏组件

1、你要自定义导航栏首先你要知道导航栏的高度,导航栏由状态栏和胶囊按钮构成。通过Object wx.getMenuButtonBoundingClientRect()可以拿到胶囊按钮的信息,通过wx.getSystemInfo可以拿导航栏信息
在这里插入图片描述
在这里插入图片描述

整个导航栏高度 = statusBarHeight + height + (top-statusBarHeight )*2;

直接分成导航栏和nav栏两块

直接上代码,代码里面有注释

.wxml

1 <view class="share-reward-header" style="height: {{navBarSpaceHeight}}px" style="background-color: {{backgroundColor}}"> 2 <view class="navbar" > 3 <view style="height:{{statusBarHeight}}px" /> 4 <view style="height:{{navigateContentHeight}}px;}}" class="navbar-content"> 5 <view class="go-back" style="height:{{navigateContentHeight}}px;" wx:if="{{!hideBack}}"> 6 <navigator open-type="switchTab" class="go-back-navigate" hover-class="none" url="{{url}}"> 7 <image src="../../images/go-back.png"></image> 8 </navigator> 9 </view> 10 <text class="navbar-title" style="max-width:{{navigateTitleMaxWidth}}px;">{{title}}</text> 11 </view> 12 </view> 13 </view> 14 <view style="height: {{navBarSpaceHeight}}px;width:100%;"></view> //占位块 复制代码

.wxss

1 .share-reward-header{ 2 width: 100%; 3 position: fixed; 4 z-index: 9999; 5 } 6 .share-reward-header .navbar { 7 /* background-color: #FF650C; */ 8 position: relative; 9 } 10 .share-reward-header .navbar-content { 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 position: relative; 15 } 16 .share-reward-header .go-back{ 17 position: absolute; 18 left:0; 19 top:0; 20 display: flex; 21 justify-content: center; 22 align-items: center; 23 box-sizing: border-box; 24 z-index:1000; 25 } 26 .share-reward-header .go-back .go-back-navigate{ 27 display: flex; 28 justify-content: center; 29 align-items: center; 30 box-sizing: content-box; 31 width:20rpx; 32 height:100%; 33 padding:0 10rpx 0 26rpx; 34 } 35 .share-reward-header .go-back image{ 36 display: block; 37 width:20rpx; 38 height:37rpx; 39 } 40 .share-reward-header .navbar-title { 41 text-align: center; 42 white-space: nowrap; 43 overflow: hidden; 44 text-overflow: ellipsis; 45 font-size: 30rpx; 46 font-weight: bold; 47 z-index:999; 48 color: #ffffff; 49 max-width: 350rpx; 50 } 复制代码

.js

import { IApp } from '../../../app' const app = getApp<IApp>(); Component({ properties:{ title:{ type:String, value:'' }, //标题 url:{ type:String, value:"" }, //返回键跳转地址 hideBack:{ type:Boolean, value:false }, //是否显示返回键 backgroundColor:{ type:String, value:"#FF7700" } //背景色 }, data:{ statusBarHeight:20, navigateTitleMaxWidth:0, fontSizeSetting:0, navigateContentHeight:0, navBarSpaceHeight:0 }, attached:function(){ const headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 let navigateTitleMaxWidth = 0 const statusBarHeight = app.globalData.systemInfo.statusBarHeight // 状态栏高度 navigateTitleMaxWidth = app.globalData.systemInfo.windowWidth - (app.globalData.systemInfo.windowWidth - headerPosi.left + 15) * 2 this.setData({ statusBarHeight: statusBarHeight, navigateContentHeight: (headerPosi.top - statusBarHeight) * 2 + headerPosi.height, navigateTitleMaxWidth:navigateTitleMaxWidth },()=>{ this.setData({ navBarSpaceHeight:this.data.statusBarHeight+this.data.navigateContentHeight }) }) }, methods:{ } }) //你看到app.globalData.某某可能有点懵,这里我在app.js里面做了全局变量处理,一次定义全局使用 this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect() wx.getSystemInfo({ success: function (res) { this.globalData.systemInfo = res } }) 复制代码
{ "component": true }

.json 里面一定要加上面这个

由于全局只用直接在app.json里面配置的时候注册

在这里插入图片描述在这里插入图片描述

使用如下

<tabbar title="标题" url="跳转地址"></tabbar> 不需要返回键 <tabbar title="标题" hideBack="true"></tabbar>

然后就结束了

  • 195
  • 0
  • 0