微信小程序自定义状态栏navigationBar样式组件，适配所有机型

一、在app.json设置navigationStyle自定义

"window": {"navigationStyle": "custom"
}

二、在app.js中计算出状态栏的高度

App({globalData:{navHeight: 0, // 导航高度navTop: 0, //胶囊按钮与顶部的距离statusBarHeight: 0, // 状态栏高度systemData:{}}onLaunch: function() {//获取系统信息this.getSystemData();},getSystemData(){let menuButtonObject = wx.getMenuButtonBoundingClientRect();wx.getSystemInfo({success: res => {this.globalData.systemData = res ? res : {};let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top, //胶囊按钮与顶部的距离navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度this.globalData.navHeight = navHeight;this.globalData.navTop = navTop;this.globalData.statusBarHeight = res.statusBarHeight;console.log(this.globalData)}})}
})

三、自定义组件header

header.wxml

<cover-view class="header" style="height: {{navHeight}}px;background-color:{{background}};"><cover-view wx:if="{{showBack}}" bindtap="back" class="btn-back" style="top:{{navTop+8}}px"><cover-image src="{{backImg}}" class="img" ></cover-image></cover-view><cover-view wx:if="{{title}}" style="margin-top: {{navTop}}px;line-height:{{(navHeight-navTop)}}px;color: {{color}};">{{title}}</cover-view><cover-view wx:else style="margin:{{navTop}}px auto 0" class="logo"><cover-image bindtap="back" src="{{imageSite}}/logo_top.png" class="img" ></cover-image></cover-view>
</cover-view>

header.js

const app = getApp();
Component({/*** 组件的属性列表*/properties: {background: { //背景色type: String,value: "none"},color: { //字体颜色type: String,value: "#333333"},title: { //标题type: String,value: ""},showBack: { //是否显示返回按钮type: Boolean,value: true},backImg:{  //返回按钮图片地址type: String,value: "btn-back.png"}},/*** 组件的初始数据*/data: {navHeight: app.globalData.navHeight,navTop: app.globalData.navTop,statusBarHeight: app.globalData.statusBarHeight,imageSite: app.globalData.imageSite, //服务器地址},/*** 组件的方法列表*/methods: {back() {var pagelist = getCurrentPages();if (pagelist.length > 1) {wx.navigateBack({delta: 1})} else {wx.reLaunch({url: '/pages/index/index',})}},},ready() {}
})

css就不展示了

四、在组件中的使用

index.js中设置高度

const app = getApp()Page({data: {navHeight:app.globalData.navHeight,},})

index.html中引入组件

<header title="首页"></header>
<view  style="margin-top:{{navHeight+8}}px">内容
</view>

微信小程序自定义状态栏navigationBar样式组件，适配所有机型相关推荐

微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序自定义状态栏
首先修改 app.json文件中的 windows字段如下: {"pages": ["pages/index/index"],"window" ...
微信小程序自定义左上角胶囊样式
1. 将app.js 中的 window 对象属性navigationStyle 改为自定义 "window": {"navigationStyle": &qu ...
微信小程序自定义图片上传组件
实现功能: 点击上传按钮可上传图片,并且可定义最多可上传的图片数量.限制图片的大小.类型和来源. 点击图片可预览图片. 点击删除按钮可删除图片. <!-- image-upload.wxml - ...
微信小程序，图片居中显示，适配不同机型
<view style='width:100%;height:100%;text-align:center;' class="picture-2"> <ima ...
微信小程序——自定义顶部菜单navigationBar方式（可详细了！）
前言: 开发中,设计师也是奇思妙想,把小程序顶部的默认菜单改成了自己觉得好看的样式,改了返回icon的样式,加了各种返回首页.收藏.什么鬼的按钮,甚至把胶囊按钮都给改了~~~,好吧,遵从设计师的审美, ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...

微信小程序自定义状态栏navigationBar样式组件，适配所有机型

微信小程序自定义状态栏navigationBar样式组件，适配所有机型相关推荐

最新文章

热门文章