编写移动端自定义navBar

移动端自定义navBar

动态获取设备基本信息,在项目的钩子中获取状态栏高度和自定义navBar的高度

onLaunch: function() {let e = uni.getSystemInfoSync();this.$options.globalData.statusBarH = e.statusBarHeight;// #ifndef MPif(e.platform == 'android') {this.$options.globalData.customBarH = e.statusBarHeight + 50}else {this.$options.globalData.customBarH = e.statusBarHeight + 45}// #endif// #ifdef MP-WEIXINlet custom = wx.getMenuButtonBoundingClientRect();this.$options.globalData.customBarH = custom.bottom + custom.top - e.statusBarHeight// #endif// #ifdef MP-ALIPAYthis.$options.globalData.customBarH = e.statusBarHeight + e.titleBarHeight// #endif// #ifdef MP-TOUTIAOlet custom = tt.getMenuButtonBoundingClientRect();this.$options.globalData.customBarH = custom.bottom + custom.top - e.statusBarHeight// #endifconsole.log("customBarH",this.$options.globalData.customBarH,",statusBarH",this.$options.globalData.statusBarH);
},

注：获取设备信息建议使用同步的那个api ,使用异步有时高度会获取不到，比写回调解决要简单方便。
当前只做了微信小程序、支付宝小程序、字节小程序以及H5的适配。

<template><view><view :style="style"><view :style="statusBar"/><view :style="navBar" class="navBar"><slot></slot></view>  </view></view>
</template><script>export default {name:"uni-header",data() {return {statusBarH: getApp().globalData.statusBarH,customBarH: getApp().globalData.customBarH};},computed:{style() {// #ifdef MP-ALIPAY || H5 || MP-WEIXIN || MP-TOUTIAOlet _style = `height: ${this.customBarH * 2}rpx;width: 100vw;background-color:#FFF`// #endifreturn _style},statusBar(){// #ifdef MP-ALIPAY || H5 || MP-WEIXIN || MP-TOUTIAOlet _style = `height: ${this.statusBarH * 2}rpx;width: 100vw;background-color:#fff`// #endifreturn _style},navBar(){// #ifdef MP-ALIPAY || H5 || MP-WEIXIN || MP-TOUTIAOlet _style = `height: ${this.customBarH * 2 - this.statusBarH * 2}rpx;line-height: ${this.customBarH * 2 - this.statusBarH * 2}rpx;width: 100vw;`// #endifreturn _style}}}
</script><style lang="scss"></style>

没有写中间内容部分，这个内容每个人的东西都不一样，所以写一个插槽，内部怎么写可以自己发挥。

<u-header><view class="navBar"><image class="nav_logo" src="" style=""></image><view class="nav_logo">专业团队</view></view></u-header>

注：u-header是注册的组件名。
推荐uniapp的easycom。这个是真的好用，之前在页面中使用组件都需要导入，注册，然后才可以使用，使用easycom，正则匹配到组件文件直接就省掉导入注册了，在页面直接使用就可以，很方便。强推！！！

编写移动端自定义navBar相关推荐

java如何给一个链表定义和传值_如何在CUDA中为Transformer编写一个PyTorch自定义层...
如今,深度学习模型处于持续的演进中,它们正变得庞大而复杂.研究者们通常通过组合现有的 TensorFlow 或 PyTorch 操作符来发现新的架构.然而,有时候,我们可能需要通过自定义的操作符来实现 ...
ROS 创建msg和srv 编写发布者和订阅者节点编写服务端和客户端节点(python版本)
ROS 创建msg和srv 编写发布者和订阅者节点编写服务端和客户端节点-python版本 rosed msg和srv 创建msg 使用rosmsg 创建srv 使用rossrv 重新make一下软 ...
传奇服务器npc位置文件,传奇GEE引擎服务端自定义NPC示列工具
传奇GEE引擎服务端自定义NPC示列工具测试自定义NPC 配置文件:D:\MirServer\Mir200\Envir\CustomNPC 先在 Merchant.txt 中,设置一个 appr = ...
ROS2与C++入门教程-编写服务端和客户端 - 创客智造
来源:https://www.ncnynl.com/archives/201806/2490.html 说明: 介绍如何编写服务端和客户端编写服务端步骤: 新建包cpp_srvcli cd ~/de ...
vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...
超详细版本vue+capacitor（自定义capacitor插件）编写移动端应用
人生苦短,我们要: 我的环境 Node v16.13.0 npm v8.1.0 mac的话需要安装Xcode windows的话需要Java 8 JDK和Android Studio软件本文以安卓开 ...
微信小程序自定义navbar
自定义导航栏项目中需求: 导航栏在插画上, 这时需要采用自定义导航栏实现. 在json配置中把navigationStyle设置为custom, 这时只会保留右上角胶囊按钮. 公共的导航栏编写一个自 ...
深入Atlas系列：客户端网络访问基础结构示例（1） - 编写并使用自定义的WebRequestExecutor...
WebRequestExecutor是ASP.NET AJAX网络访问基础结构的唯一修改点.理论上,我们可以使用自定义的WebRequestExecutor来取代默认的XMLHttpExecutor. ...
基于operator sdk编写一个k8s自定义资源管理应用
简介:operator 是一种 kubernetes 的扩展形式,可以帮助用户以 Kubernetes 的声明式 API 风格自定义来管理应用及服务,operator已经成为分布式应用在k8s集群部署 ...

编写移动端自定义navBar

移动端自定义navBar

编写移动端自定义navBar相关推荐

最新文章

热门文章