微信小程序自定义顶部组件customHeader的示例代码


Posted in Javascript onJune 03, 2020

1、开启配置自定义顶部

微信小程序自定义顶部组件customHeader的示例代码

{
 "window": {
 "navigationStyle":"custom"
 }
}

在app.json的文件window配置"navigationStyle": "custom"属性即可

2、自定义顶部计算原理

2.1 获取系统状态栏的高度和屏幕宽度

使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。

微信小程序自定义顶部组件customHeader的示例代码

2.2 获取右上角胶囊位置信息

使用wx.getMenuButtonBoundingClientRect()方法获取右上角胶囊位置信息。
关键问题在于自定义胶囊的上、下和左边距。

微信小程序自定义顶部组件customHeader的示例代码

2.3 自定义顶部距离计算代码

app.js代码如下

App({
 // 小程序初始化
 onLaunch: function() {
 // 获取自定义顶部高度相关参数
 let capsuleObj = wx.getMenuButtonBoundingClientRect();
 // console.log("==胶囊信息==");
 // console.log(capsuleObj);

 wx.getSystemInfo({
 success: (res) => {
 // console.log("==获取系统信息==");
 // console.log(res)
 var statusBarHeight = res.statusBarHeight; //顶部状态栏高度

 this.globalData.capsuleObj = capsuleObj;
 this.globalData.titleHeight = statusBarHeight + capsuleObj.height + (capsuleObj.top - statusBarHeight) * 2;
 },
 failure() {
 }
 })
 },

 // 全局缓存
 globalData: {
 loginStatus: false,
 },
})

3、封装自定义顶部

3.1效果图展示

微信小程序自定义顶部组件customHeader的示例代码
微信小程序自定义顶部组件customHeader的示例代码

3.2组件代码

index.wxml

<!--components/customHeader/index.wxml-->
<view class="customHeader_box" style="height:{{titleHeight}}px; background-color:{{bgColor}};">
 <!-- 菜单 -->
 <view wx:if="{{menuFlag}}" class="menu_box" style="height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
 <view class="customIcon" bindtap="meunClick">
 <image src="/images/customMenu.png"></image>
 </view>
 </view>

 <!-- 返回+首页 -->
 <view wx:if="{{backHomeFlag}}" class="backHome_box" style="width:{{capsuleObj.width}}px; height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
 <view class="customIcon backIcon" bindtap="backClick">
 <image src="/images/customBack.png"></image>
 </view>
 <view class="customIcon homeIcon" bindtap="homeClick">
 <image src="/images/customHome.png"></image>
 </view>
 </view>

 <!-- 标题 -->
 <view class="customHeader_title" style="top:{{capsuleObj.top}}px; height:{{capsuleObj.height}}px; line-height:{{capsuleObj.height}}px;">
 {{customTitle}}
 </view>
</view>

<!-- 自定义顶部距离修正 -->
<view class="customWrap" style="height:{{titleHeight}}px;"></view>

index.wxss

/* components/customHeader/index.wxss */

.customHeader_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 99999;
}

.customIcon {
 flex: 1;
}

.customIcon image {
 width: 30rpx;
 height: 30rpx;
}

/* 菜单 */
.menu_box{
 text-align: center;
 box-sizing: border-box;
 overflow: hidden;
 position: absolute;
 left: 10px;
 z-index: 11;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.menu_box .customIcon image{
 width: 36rpx;
 height: 36rpx;
}

/* 返回+首页 */

.backHome_box {
 text-align: center;
 border: 1px solid #e5e5e5;
 border-radius: 20px;
 box-sizing: border-box;
 overflow: hidden;
 position: absolute;
 left: 10px;
 z-index: 11;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.backIcon {
 border-right: 1rpx solid #e5e5e5;
}

/* 标题 */

.customHeader_title {
 width: 100%;
 padding-left: 115px;
 padding-right: 115px;
 text-align: center;
 font-size: 32rpx;
 font-weight: bold;
 color: #333;
 text-overflow: ellipsis;
 box-sizing: border-box;
 overflow: hidden;
 white-space: nowrap;
 position: absolute;
 left: 0;
 z-index: 10;
}

/* 自定义顶部距离修正 */
.customWrap{
 width: 100%;
 position: relative;
 left: 0;
 z-index: 99998;
}

index.js

// components/customHeader/index.js
const app = getApp();

Component({
 /**
 * 组件的属性列表
 */
 properties: {
 customTitle: String,
 bgColor: {
 type: String,
 value: '#fff'
 },
 menuFlag: {
 type: Boolean,
 value: false
 },
 backHomeFlag: {
 type: Boolean,
 value: false
 },
 },

 /**
 * 组件的初始数据
 */
 data: {

 },

 attached: function() {
 this.setData({
 titleHeight: app.globalData.titleHeight,
 capsuleObj: app.globalData.capsuleObj
 })
 },

 options: {
 multipleSlots: true, //开启多slot
 },

 /**
 * 组件的方法列表
 */
 methods: {
 // 菜单
 meunClick: function () {
 wx.navigateTo({
 url: '/pages/menu/menu',
 })
 },

 // 返回
 backClick: function() {
 wx.navigateBack({
 delta: 1
 })
 },
 
 // 回首页
 homeClick: function() {
 wx.navigateTo({
 url: '/pages/index/index'
 })
 },
 }
})

index.json

{
 "component": true
}

4、组件使用方法

index.wxml

<!--pages/index/index.wxml-->

<!-- 自定义顶部 -->
<customHeader menuFlag customTitle="首页"></customHeader>

<view class="url">
	<navigator hover-class="none" url="../child/child">跳到子页</navigator>
</view>

ps:我这边封装了2个样式,meneFlag是菜单的。backHomeFlag是“返回+首页”样式的。

json配置

{
 "usingComponents": {
 "customHeader": "/components/customHeader/index"
 }
}

5、小结

此组件兼容性,可以兼容安卓、IOS、刘海屏,如果你们测试出来有新bug,可以在gitHub提出issues,帮助您解决。

链接在此:
微信小程序自定义顶部组件

到此这篇关于微信小程序-自定义顶部组件customHeader的文章就介绍到这了,更多相关微信小程序自定义顶部组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中常用编程知识
Apr 08 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
深入分析jQuery.one() 函数
Jun 03 #jQuery
layui实现显示数据表格、搜索和修改功能示例
Jun 03 #Javascript
微信小程序文章详情功能完整实例
Jun 03 #Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 #Javascript
微信小程序文章列表功能完整实例
Jun 03 #Javascript
Angular8 简单表单验证的实现示例
Jun 03 #Javascript
JS实现前端动态分页码代码实例
Jun 02 #Javascript
You might like
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
js加强的经典分页实例
2013/03/15 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
深入理解Django的自定义过滤器
2017/10/17 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
某公司部分笔试题
2013/11/05 面试题
大学校运会广播稿
2014/02/03 职场文书
党的群众路线学习材料
2014/05/16 职场文书
消防标语大全
2014/06/07 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js