微信小程序自定义顶部组件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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
ant design实现圈选功能
Dec 17 Javascript
javascript函数式编程基础
Sep 15 Javascript
Ajax实现三级联动效果
Oct 05 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php批量删除数据
2007/01/18 PHP
PHP define函数的使用说明
2008/08/27 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python/golang 删除链表中的元素
2020/09/14 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
一道Delphi上机题
2012/06/04 面试题
计算机大学生的自我评价
2013/10/15 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
洗发露广告词
2014/03/14 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
演讲开头怎么书写?
2019/08/06 职场文书