小程序自定義頭部navbar組件

本文轉載自查看原文 2020-11-29 17:45 798 小程序

首先先編寫導航欄組件

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="標題" hideBack="true"></tabbar>

然后就結束了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uniapp實現小程序自定義頭部組件基於uniapp自定義Navbar+Tabbar組件「兼容H5+小程序+App端Nvue」自定義小程序頭部微信小程序自定義導航組件 nav頭部全面屏設計微信小程序、自定義頭部樣式微信小程序自定義頭部導航欄小程序自定義頭部導航欄小程序自定義頭部導航欄小程序自定義組件 -- 彈窗小程序自定義組件及傳值