微信小程序 自定義頂部狀態欄

 

1>項目的結構以下:

2>組件的index.wxml代碼以下:

<!--沒有按鈕的狀況-->

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px" wx:if="{{!isshowbtn}}">

<view class='custom titlev'>{{title}}</view>

</view>

<!--顯示按鈕的狀況-->

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px" wx:else>

<view class='custom iconv'>

<image src='/resources/preicon.png' class='icon' bindtap='goprepageopt' wx:if="{{isshowpre}}"></image>

<image src='/resources/home.png' class='icon' bindtap='gohomepageopt' wx:if="{{isshowhome}}"></image>

</view>

<view class='custom title'>{{title}}</view>

</view>

<!--站位行，填補空白-->

<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

 

3>樣式index.wxss文件代碼以下:

.flex_center {

position: fixed;

width: 100%;

top: 0;

left: 0;

height: 45px;

background: #fff;

z-index: 999;

display: flex;

}

.custom .iconv {

color: #fff;

font-size: 34rpx;

font-weight: 500;

max-width: 150rpx;

min-width: 80rpx;

text-align: center;

display: flex;

border: 1rpx solid #ccc;

border-radius: 60rpx;

margin: 12rpx 10rpx;

justify-content: space-around;

padding: 0 10rpx;

}

.custom .iconv .icon {

width: 32rpx;

height: 32rpx;

margin: 15rpx 10rpx;

}

.custom .title {

color: #333;

font-size: 34rpx;

font-weight: 500;

min-width: 350rpx;

max-width: 420rpx;

line-height: 45px;

text-align: center;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.custom .titlev {

color: #333;

font-size: 34rpx;

font-weight: 500;

width: 500rpx;

line-height: 45px;

text-align: center;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

margin-left: 50rpx;

}

.empty_custom {

height: 45px;

width: 100%;

}

 

4>組件的邏輯代碼,以下:

Component({

/**

* 組件的屬性列表

*/

properties: {

receiveData: {

type: null,

observer: function (newVal, oldVal) {

console.log("頂部狀態欄參數:");

console.log(newVal);

this.setData({

isshowbtn: newVal.isshowbtn,//是否顯示按鈕

isshowpre: newVal.isshowpre, //返回按鈕

isshowhome:newVal.isshowhome, //首頁按鈕

title: newVal.title, //標題

})

}

},

},

/**

* 組件的初始數據

*/

data: {

statusBarHeight: getApp().globalData.statusBarHeight

},

/**

* 組件的方法列表

*/

methods: {

//點擊返回前一個頁面

goprepageopt: function() {

console.log("點擊返回上個頁面");

this.triggerEvent('prechange', 'false');

},

//點擊返回首頁頁面

gohomepageopt: function() {

console.log("點擊返回首頁");

this.triggerEvent('homechange', 'false');

},

}

})

5>配置文件的設置

globalData: {

userInfo: null,

statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']

}

6>頁面home調用

 《1》index.json

{

"navigationStyle":"custom",

"navigationBarTitleText": "標題",

"usingComponents": {

"statusbars":"../../components/statubars/index"

}

}

《2》index.wxml

<statusbars receiveData="{{statusbarobj}}" bindprechange="prechangeopt" bindhomechange="homechangeopt" />

 

《3》index.js初始化組件數據和組件點擊事件的回調

/**

* 生命週期函數--監聽頁面顯示

*/

onShow: function () {

var that=this;

that.setData({

statusbarobj:{

isshowbtn: true,//是否顯示按鈕

isshowpre: true, //返回按鈕

isshowhome: true, //首頁按鈕

title:"標題標題標題標題標題標題標題標題標題標題標題標題", //標題

}

})

},

prechangeopt:function(){

console.log("組件回調，返回上一頁");

},

homechangeopt:function(){

console.log("組件回調，返回首頁");

},

 

7>測試頁面效果

 《1》所有顯示

 

 《2》只顯示首頁icon

《3》只顯示返回按鈕

 

 《4》只顯示標題