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》只显示标题
- 微信小程序自定义顶部导航
注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...
- 微信小程序自定义顶部
wxml <view style="height:{{titleHeight}}px;background:{{background}}" class="user- ...
- 微信小程序——自定义导航栏
微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序-自定义底部导航
代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
随机推荐
- curl ftp libcurl 功能使用
struct FtpFile { const char *filename; FILE *stream; }; static size_t my_fwrite(void *buffer, size_t ...
- webUploader上传大视频文件相关web.config配置
在webuploader上传大文件时必须配置一下,不然请求后台处理程序时,会请求超时.出现404! <system.web> <httpRuntime maxRequestLengt ...
- 修复\okldr.mbr ,状态0x000000f
问题: 系统出错显示: 修复\okldr.mbr ,状态0x000000f. 方法: 利用bcdeidt删除错误启动项. bcdeidt的应用 1.启动系统,点击开始,运行中输入cmd,鼠标右键管理员 ...
- 一文解读AI芯片之间的战争 (转)
2015年的秋天,北京的雨水比往年要多些,温度却不算太冷.这一年里,年仅23岁的姚颂刚刚拿到清华大学的毕业证书;32岁的陈天石博士毕业后已在中科院计算所待了整整8年;而在芯片界摸爬滚打了14年的老将何 ...
- [b0001] 伪分布式 hadoop 2.6.4
说明: 任务:搭建Hadoop伪分布式版本. 目的:快速搭建一个学习环境,跳过这一环境,快速进入状态,使用Hadoop一些组件做些任务 没有选择2.7,觉得bug比较多,不稳定. 选择伪分布式简单快速 ...
- [20191010]bash行计算器.txt
[20191010]bash行计算器.txt --//写一个bash行计算器,为了避免冲突,函数命名为2个=,1个=感觉不是很好(心里上^_^).--//使用bc计算器,里面函数不能使用圆括号,使用中 ...
- PHP代码篇(五)--如何将图片文件上传到另外一台服务上
说,我有一个需求,就是一个临时功能.由于工作开发问题,我们有一个B项目,需要有一个商品添加的功能,涉及到添加商品内容,比如商品名字,商品描述,商品库存,商品图片等.后台商品添加的接口已经写完了,但是问 ...
- VM虚拟机Android安装图形界面
摘自,转 https://blog.csdn.net/weixin_42633191/article/details/89391188
- 16.Linux-LCD驱动(详解)【转】
转自:https://www.cnblogs.com/lifexy/p/7604011.html 在上一节LCD层次分析中,得出写个LCD驱动入口函数,需要以下4步: 1) 分配一个fb_info结构 ...
- itest(爱测试) 4.0.0 发布,开源敏捷测试管理 &BUG 跟踪管理软件
v4.0.0 下载地址 :itest下载 itest 简介:查看简介 V4.0.0 根据用户反馈,共增加了29个更新:其中有15 个功能增强和14个BUG修复 :UI更加清爽,用例执行和用例复制粘 ...