微信小程序自定义导航栏;uni-app微信小程序自定义顶部导航栏;微信小程序顶部导航栏高度;微信小程序左上角胶囊按钮;uni-app微信小程序左上角胶囊设置

本文是自定义微信小程序的顶部导航栏;自定义微信小程序底部导航栏tabBar看另外这篇

文末的两个文件代码可以直接复制使用

自定义导航栏页图
在这里插入图片描述在这里插入图片描述

一、场景: 有些时候,微信小程序需要我们在导航栏做更多的操作样式(例如高度、颜色、加按钮);原生的导航栏明显无法处理,这时候我们就需要自定义导航栏;> 一、注意点:顶部导航栏高度 = 手机系统状态栏高度 + 44px
1.手机系统状态栏高度: 既你的手机最上方显示 时间、信号、电量的部分;每个手机的状态栏高度是不一样的,我们可以在onReady函数内,使用uni.getSystemInfo()获取系统信息得到statusBarHeight的高度就是(下图青绿色部分);切记:不可以使用css变量–status-bar-height,这个变量是固定的25px(会导致不同手机的状态栏不兼容)
2.紫色部分就是书写导航栏标题的位置;这个高度在微信小程序里是固定的44px;所以我们才能得到顶部导航栏的计算公式;
在这里插入图片描述

二、自定义导航栏设置后遗留问题:
–2.1自定义后,左上角的返回按钮没有了(需要自己写逻辑和按钮图标);
–2.2真机页面下划时候会导致,自定义导航栏也下滑(需要自己进行顶部导航栏固定定位fiexd和z-index);
–2.3导航栏的文字大小和颜色会和原生的不一致(原生的是跟随系统),但是可以自定义自己导航栏的文字大小和颜色;
–2.4uni-app文档的自定义导航栏使用注意事项
在这里插入图片描述

三、代码逻辑:分别是pages.json内去掉原生导航栏 和 App.vue页面储存数据 和 自定义导航栏页面
以下两个文件代码可直接复制使用,无需更改就可以运行

–步骤3.1:在pages.json内去掉原生导航栏 "navigationStyle": "custom"
在这里插入图片描述

–步骤3.2:App.vue:在onShow页面获取系统数据并存储

<script>
export default {onShow: function () {console.log('App Show')uni.getSystemInfo({success: (result) => {// 获取手机系统的状态栏高度(不同手机的状态栏高度不同)  ( 不要使用uni-app官方文档的var(--status-bar-height) 官方这个是固定的20px  不对的 )// console.log('当前手机的状态栏高度',result.statusBarHeight)let statusBarHeight = result.statusBarHeight + 'px'// 获取右侧胶囊的信息 单位pxconst menuButtonInfo = uni.getMenuButtonBoundingClientRect()//bottom: 胶囊底部距离屏幕顶部的距离//height: 胶囊高度//left:   胶囊左侧距离屏幕左侧的距离//right:  胶囊右侧距离屏幕左侧的距离//top:    胶囊顶部距离屏幕顶部的距离//width:  胶囊宽度// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)let menuWidth = menuButtonInfo.width + 'px'let menuHeight = menuButtonInfo.height + 'px'let menuBorderRadius = menuButtonInfo.height / 2 + 'px'let menuRight = result.screenWidth - menuButtonInfo.right + 'px'let menuTop = menuButtonInfo.top + 'px'let contentTop = result.statusBarHeight + 44 + 'px'let menuInfo = {statusBarHeight: statusBarHeight,//状态栏高度----用来给自定义导航条页面的顶部导航条设计padding-top使用:目的留出系统的状态栏区域menuWidth: menuWidth,//右侧的胶囊宽度--用来给自定义导航条页面的左侧胶囊设置使用menuHeight: menuHeight,//右侧的胶囊高度--用来给自定义导航条页面的左侧胶囊设置使用menuBorderRadius: menuBorderRadius,//一半的圆角--用来给自定义导航条页面的左侧胶囊设置使用menuRight: menuRight,//右侧的胶囊距离右侧屏幕距离--用来给自定义导航条页面的左侧胶囊设置使用menuTop: menuTop,//右侧的胶囊顶部距离屏幕顶部的距离--用来给自定义导航条页面的左侧胶囊设置使用contentTop: contentTop,//内容区距离页面最上方的高度--用来给自定义导航条页面的内容区定位距离使用}uni.setStorageSync('menuInfo', menuInfo)},fail: (error) => {console.log(error)}})},}
</script>

–步骤3.3:自定义导航栏页面:

<template><view class="page_box"><!-- 行内式直接变量小程序不支持,故需要写成动态的变量 --><view class="my_tab_title" :style="{paddingTop:statusBarHeight}">自定义的顶部导航条<!-- 左侧自定义胶囊 --><view class="menu_btn" :style="{ position: 'fixed',top:menuTop,left:menuRight,width:menuWidth,height:menuHeight, border: '1rpx solid #ddd',borderRadius:menuBorderRadius,}"><uni-icons @click="goToBack" class="arrowleft" type="arrowleft" :color="'#000'" size="20" /><text class="text_box"></text><uni-icons @click="goToHome" class="home" type="home" :color="'#000'" size="20" /></view></view><!-- 内容区↓ ↓ ↓ ↓ ↓ ↓ --><view class="content_box" :style="{marginTop:contentTop}">页面的正常内容书写区</view></view>
</template>
<script>
export default {data () {return {statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,//状态栏的高度(可以设置为顶部导航条的padding-top)menuWidth: uni.getStorageSync('menuInfo').menuWidth,menuHeight: uni.getStorageSync('menuInfo').menuHeight,menuBorderRadius: uni.getStorageSync('menuInfo').menuBorderRadius,menuRight: uni.getStorageSync('menuInfo').menuRight,menuTop: uni.getStorageSync('menuInfo').menuTop,contentTop: uni.getStorageSync('menuInfo').contentTop,}},methods: {goToBack () {uni.navigateBack({delta: 1})},goToHome () {uni.switchTab({url: '/pages/index/index'})//下方方法也可以回到首页 还可以传参 但是不建议使用---因为此方法会关闭其他所有页面(导致再次打开别的页面时候 会再次触发别的页面的onLoad)// uni.reLaunch({//   url: '/pages/index/index?id=1'// })}},
};
</script><style lang="less" scope>
.page_box {.my_tab_title {width: 100%;height: 44px; //这个是固定的44px(所有小程序顶部高度都是 = 44px + 手机系统状态栏高度)line-height: 44px;text-align: center;// background-color: #f1f;background-color: #f8f8f8;position: fixed;top: 0;z-index: inherit;font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei,Helvetica Neue, Helvetica, Arial, sans-serif !important;font-size: 32rpx;color: #000;font-weight: 500;.menu_btn {background-color: #ffffff; //这个是小程序默认的标题栏背景色overflow: hidden;// position: fixed;//行内式写了固定定位--目的是去掉下划页面一起滚动问题.arrowleft {position: absolute;top: 50%;left: 50%;transform: translate(-160%, -50%) !important;-webkit-transform: translate(-160%, -50%) !important;}.text_box {width: 1rpx;height: 20px;background-color: #ddd;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) !important;-webkit-transform: translate(-50%, -50%) !important;}.home {position: absolute;top: 50%;left: 50%;transform: translate(60%, -50%) !important;-webkit-transform: translate(60%, -50%) !important;}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403393.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML5与HTML4的比较

HHTML5封装一些标签和属性&#xff0c;方便了开发。 1 <form> 2 <p> 3 <label>Username:<input name"search" type"text" id"search" autofocus></label> 4 </p> 5 &l…

[iOS]Unable to run app in Simulator

From: http://blog.csdn.net/snowwind/article/details/41099575 今天在试Admob的时候&#xff0c;发现在simulator上&#xff0c;程序突然不能运行了&#xff0c; 提示 [plain] view plaincopy Unable to run app in Simulator An error was encountered while running (…

uni-app微信小程序动态样式设置;微信小程序style行内式无效;微信小程序style行内式编译报错;微信小程序:style设置样式

场景&#xff1a;微信小程序设置动态样式&#xff0c;有些时候是需要用到变量来书写的&#xff1b;但是实际使用发现&#xff0c;行内式书写虽然有效&#xff0c;但是会使得微信小程序的编辑失败&#xff1b;故需要使用动态的v-bind来写动态变量行内式样式&#xff08;既使用:s…

循环队列及C语言实现二

在我的上一篇博文中已经讲到循环队列的特点作用以及C语言实现&#xff0c;当然实现和操作的方式比较简单&#xff0c;在实际项目应用中略显粗糙。因此&#xff0c;这一篇提供一个进阶篇的实现与操作接口。具体函数作用可以参见我的注释部分&#xff0c;使用的时候直接把里面的接…

MAC下secureCRT无法保存密码的解决方法

From: http://www.php230.com/securecrt-for-mac-store-password.html 在mac下新安装了secureCRT&#xff0c;取代系统自带的终端工具&#xff0c;主要是为了方便链接服务器。 mac下面的secureCRT默认保存不上密码&#xff0c;我们选择了保存密码后&#xff0c;下次登录还是提…

微信小程序下拉刷新列表onPullDownRefresh;微信小程序上划加载列表onReachBottom;uni-app微信小程序下拉加载数据;uni-app微信小程序上划页面加载数据

需求&#xff1a;微信小程序列表加载有两种方式&#xff0c;分别是按住页面下拉加载数据数据&#xff08;触发onPullDownRefresh&#xff09;和直接上划滚动页面到底部加载数据&#xff08;触发onReachBottom函数&#xff09;。 本文主要是使用上划滚动页面触底加载数据&#x…

ARP协议在同网段及跨网段下的工作原理

一、ARP在同个网段下的工作原理 首先&#xff0c;每台主机都会在自己的ARP缓冲区中建立一个 ARP列表&#xff0c;以表示IP地址和MAC地址的对应关系。当源主机需要将一个数据包要发送到目的主机时&#xff0c;会首先检查自己 ARP列表中是否存在该 IP地址对应的MAC地址&#xff0…

如何查看服务器当前的负载信息

From: http://blog.csdn.net/mal327/article/details/7423750 如何查看服务器当前的负载信息http://www.flybaaa.com/help/69_1.html网吧内突然很卡&#xff0c;这个情况我相信大家都有遇见过&#xff0c;但是通过什么方法来排查是否linux服务器的负载过大导致的这个问题呢&am…

Realtek网卡如何识别具体型号是8111B/8111C/8111D还是8111E???

From: http://support.icafe8.com/technologynews/focus/1347.html 貌似在去年&#xff0c;Realtek网卡把型号都统一为Realtek GBE什么什么的这种名字&#xff0c;这个修改说实话&#xff0c;对有盘没啥影响&#xff0c;只要驱动装好&#xff0c;能上网就ok了&#xff0c;但是…

【leetcode77】Single Number

一题目描述&#xff1a; 给定一个数组&#xff0c;只有一个数字出现一次&#xff0c;其余都是两次&#xff0c;判断那个数字 思路&#xff1a; 不断取出数据进行异或&#xff0c;最后一个数字&#xff0c;因为相同的数字会抵消代码&#xff1a; public class Solution {public …

Remoting-1

什么是Remoting&#xff0c;简而言之&#xff0c;我们可以将其看作是一种分布式处理方式。从微软的产品角度来看&#xff0c;可以说Remoting就是DCOM的一种升级&#xff0c;它改善了很多功能&#xff0c;并极好的融合到.Net平台下。Microsoft .NET Remoting 提供了一种允许对象…

DEBUG 调试

1.Step Into (also F5) 跳入 2.Step Over (also F6) 跳过 3.Step Return (also F7) 执行完当前method&#xff0c;然后return跳出此method 4.step Filter 逐步过滤 一直执行直到遇到未经过滤的位置或断点(设置Filter:window-preferences-java-Debug-step Filtering) 5.resume 重…

promise使用详解

原文链接以及promise练习题 先说结论&#xff1a; promise是解决异步函数的一种方案 将异步操作以同步方式展现出来 避免了回调地狱 1.三种状态&#xff1a;padding–等待 resolved–成功–then rejected–失败–catch 2.promise上有then和catch方法 then接受一个参数是函数 这…

Android 对话框(Dialog)大全 建立你自己的对话框

Activities提供了一种方便管理的创建、保存、回复的对话框机制&#xff0c;例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog(int), dismissDialog(int)等方法&#xff0c;如果使用这些方法的话&#xff0c;Activity将通过getOwnerActivity()方法返回该Act…

HDU 5795

题意&#xff1a; 两人轮流从 n 堆 糖果里取糖果&#xff0c;每次可以1&#xff09; 选择一堆取任意个&#xff08;不为 0&#xff09;2) 选择一堆糖果分成 3 堆&#xff08;每堆数量 > 1)拿到最后一颗糖果的人赢。 解题 &#xff1a; 打表算出一些 sg 值&#xff0c;就可以…

mac下beyond compare配置图

配置Tab键为4个空格&#xff1a; 显示行号&#xff1a;

Win7下安装linux虚拟机

关于如何在Win7下搭建linux学习环境&#xff0c;特在此分享下. 一、工具 1、VMware-workstation-full-9.0.0-812388.exe 下载地址:http://pan.baidu.com/s/1bpFT0ZX 2、32位的CenOS系统镜像文件CentOS-6.7-i386-bin-DVD1.iso. 下载地址:http://pan.baidu.com/s/1cHrxLG…

el-table处理某一行样式;el-table表格row-class-name无效原因;el-table格式化某行样式和数据

如果是设置点击el-table某行变色或者hover 点击看这篇 情景&#xff1a;:row-class-name“tableRowClassName” 无效果 原因是&#xff1a;el-table的属性里 多了个stripe&#xff0c;stripe属性可以创建带斑马纹的表格。会影响到row-class-name的渲染。去掉stripe即可。 &l…

国内ios分亨组件,

2019独角兽企业重金招聘Python工程师标准>>> 1. 新浪微博 (支持新浪微博官方 SSO OAuth 及 iOS 6 特性&#xff09; 2. 微信&#xff08;仅支持分享到朋友&#xff09; 3. 网易微博 4. 腾讯微博 5. 豆瓣 6. 人人网 https://github.com/icyl…

el-table文字超出隐藏;el-table表格文字一行展示,超出隐藏,多余的内容会在 hover时显示 ;

el-table文字默认情况下若内容过多会折行显示&#xff0c;若需要单行显示可以给el-table-column使用show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 给el-table-column添加show-overflow-t…