微信小程序自定义顶部组件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 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
PHP PDO操作总结
Nov 17 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
js运动应用实例解析
Dec 28 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
原生JS实现不断变化的标签
May 22 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
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
PHP新手上路(八)
2006/10/09 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python实现XML文件解析的示例代码
2018/02/05 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
学生逃课检讨书
2015/02/17 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技