微信小程序 自定义顶部状态栏
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》只显示标题
