微信小程序自定义顶部组件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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
详解Vue底部导航栏组件
May 02 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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
中国的第一台收音机
2021/03/01 无线电
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
原生JS实现留言板
2020/03/26 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
如何在python中实现线性回归
2020/08/10 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
品管员岗位职责
2013/11/10 职场文书
借款协议书范本
2014/04/22 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
格列夫游记读书笔记
2015/07/01 职场文书