时间:2021-05-18
1、开启配置自定义顶部
{ "window": { "navigationStyle":"custom" }}在app.json的文件window配置"navigationStyle": "custom"属性即可
2、自定义顶部计算原理
2.1 获取系统状态栏的高度和屏幕宽度
使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。
2.2 获取右上角胶囊位置信息
使用wx.getMenuButtonBoundingClientRect()方法获取右上角胶囊位置信息。
关键问题在于自定义胶囊的上、下和左边距。
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效果图展示
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
.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.jsconst 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的文章就介绍到这了,更多相关微信小程序自定义顶部组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了微信小程序自定义toast组件的方法。分享给大家供大家参考,具体如下:怎么创建就不说了,前面一篇有微信小程序自定义prompt组件直接上代码wxm
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安
微信小程序自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家。微信小程序自定义创建自定义创建与默认创建完全相同,只
这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以