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

微信小程序 自定义顶部状态栏的更多相关文章

  1. 微信小程序自定义顶部导航

    注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...

  2. 微信小程序自定义顶部

    wxml <view style="height:{{titleHeight}}px;background:{{background}}" class="user- ...

  3. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  4. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  5. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  6. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  7. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  8. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  9. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

随机推荐

  1. linux权限管理-基本权限

    目录 linux权限管理-基本权限 权限修改命令chmod linux权限管理-基本权限 权限 针对某些文件和进程,对用户进行限制 权限与用户的关系 rwx rwx r-x User Group Ot ...

  2. [20190918]关于函数索引问题.txt

    [20190918]关于函数索引问题.txt 1.环境:SCOTT@test01p> @ ver1PORT_STRING                    VERSION        BA ...

  3. PHP比较两个数组的差异

    array_diff($arr, $arr1); //比较数组差异 $arr = [1,2,3,4]; $arr1 = [1,2,3]; $diff = array_diff($arr, $arr1) ...

  4. MongoDB 最近遇到的几个小问题

    (1)连接数据库时报错 ERROR Topshelf.Hosts.ConsoleRunHost.Run An exception occurred System.TimeoutException: A ...

  5. arm-linux-gcc-4.5.1安装方法

    写在前面 之前写了一篇arm-linux-gcc-5.4.0的安装方法,但是后来发现5.4.0这个版本可能有些太新了,所以又找了这个4.5.1版本(低版本),由FriendlyARM(友善之臂)提供, ...

  6. fiddler---Fiddler性能测试

    从上几篇文章中我们了解到Fiddler可以帮助我们做接口测试,修改断点,抓包等应用,但是你可能想想不到,Fiddler也能做简单的性能测试 性能测试 性能测试是通过自动化的测试工具模拟多种正常.峰值以 ...

  7. 【cf995】F. Cowmpany Cowmpensation(拉格朗日插值)

    传送门 题意: 给出一颗树,每个结点有取值范围\([1,D]\). 现在有限制条件:对于一个子树,根节点的取值要大于等于子数内各结点的取值. 问有多少种取值方案. 思路: 手画一下发现,对于一颗大小为 ...

  8. window系统下的pycharm对虚拟机中的Ubuntu系统操作MySQL数据库

    问题:程序员和数据库的爱情故事:程序为了追一个叫MySQL数据库的姑娘,先苦练功夫,自己模拟泡妹过程积累经验,于是想到一个解决方法:[解决虚拟机跑需要连接数据库的程序卡的问题,通过在物理机Window ...

  9. 【声明式事务】Spring声明式事务实现(三)

    以MyBatis为例. 一.基于注解的声明式事务配置 1. 添加tx名字空间 xmlns:tx="http://www.springframework.org/schema/tx" ...

  10. 解释JUnit中@BeforeClass和@AfterClass标注的方法必须是static的,而在TestNg不必

    在JUnit中@BeforeClass和@AfterClass标注的方法必须是static的:但是在TestNg中却没有这样的限制,这是为什么呢. 其实和他们两的运行机制有关. 在junit中: 每运 ...