微信小程序 自定义顶部状态栏

 

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》只显示标题