uniapp中自定义导航栏动态获取高度

<template><view class="coutainer"><!-- 自定义导航栏空行 --><view class="status_bar" :style="{'height': height+'rpx'}"></view><!-- 导航栏 搜索按钮 和 navigation --><view class="navigation"><!-- 左侧搜索 icon --><uni-icons type="search" color="white" size="26"@click="searchBth"></uni-icons><!-- 中间 字体  --><text>农资与市场{{height}}</text></view></view>
</template><script>export default {data() {return {height: 26};},created() {let menuRect = wx.getMenuButtonBoundingClientRect()this.height = menuRect.top + menuRect.height},methods: {searchBth () {console.log('123')}}}
</script><style lang="scss" scoped>.coutainer {width: 100%;height: 320rpx;background-color: red;// .status_bar {//   height: calc(var(--status-bar-height) + 10rpx) ;//     width: 100%;//  }.navigation {width: 100%;height: 70rpx;border: 1px solid black;box-sizing: border-box;display: flex;align-items: center;padding-left: $uni-page-padding;text {color: white;margin-left: 240rpx;}}}
</style>

uniapp中自定义导航栏动态获取高度相关推荐

uniapp中自定义导航栏
相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然u ...
uniapp 计算自定义导航栏高度
一,自定义导航栏的重点是高度的计算从下图分析出来:导航栏高度 = (胶囊顶部距离 - 状态栏高度) x 2 + 胶囊的高度 data() {return {system:[],menu:[],sta ...
【uni-app】自定义导航栏/标题栏
目录前言什么是自定义导航栏自定义导航栏取消默认导航栏或原生导航栏全局取消原生导航栏单页面取消原生导航栏取消原生导航栏后是这样的自定义导航栏自定义导航栏组件前言 Hbuilder X ...
uniAPP 禁用原生导航栏和获取状态栏高度和使用（间距掉）
小程序的原生导航栏是禁用不了的因为他会用有一些东西,H5 和安卓.IOS 是可以禁用的: 官网找到 appplus 配置编译到 App 平台时的特定样式,部分常用配置 H5 平台也支持.以下仅列 ...
说一说要求小程序自定义导航栏的需求有多沙雕
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在超级App 内被便捷地获取和传播,同时具有出色的使用体验. 在小程序项目中自定义导航栏绝对算得上是最恶心的需求之一.本篇文章 ...
【小程序自定义组件，冒泡，自定义导航栏，页面栈】
自定义组件在根目录新建一个components的文件夹----新建一个文件夹post----新建一个compont文件也叫post 创建完之后 post.json就自动配置好了 {"com ...
Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...
微信小程序自定义导航栏与自带下拉刷新冲突
在使用HbuilderX开发微信小程序时(在HbuilderX中写代码,在微信开发者工具编译),由于微信小程序自带的导航栏功能少,样式单一等,于是采用colorUI自定义导航栏实现需求.而问题就一而再 ...
IOS 自定义导航栏标题和返回按钮标题
IOS中自定义导航栏标题: UILabel *titleText = [[UILabel alloc] initWithFrame: CGRectMake(160, 0, 120, 50)]; tit ...

uniapp中自定义导航栏动态获取高度

uniapp中自定义导航栏动态获取高度相关推荐

最新文章

热门文章