微信小程序自定义顶部组件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方式获取iframe页面中的 Dom元素
May 07 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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
Ajax PHP分页演示
2007/01/02 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Series和DataFrame使用简单入门
2019/11/13 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
迎八一活动主题
2014/01/31 职场文书
教育学习自我评价
2014/02/03 职场文书
工程承包协议书
2014/04/22 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
北京英语导游词
2015/02/12 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
Java死锁的排查
2022/05/11 Java/Android