返回顶部
首页 > 资讯 > 移动开发 >uniapp小程序自定义顶部导航栏高度适配
  • 475
分享到

uniapp小程序自定义顶部导航栏高度适配

uni-app小程序前端 2023-08-31 22:08:36 475人浏览 薄情痞子
摘要

目录 自定义导航栏介绍: 自定义导航栏的使用 step1:取消默认的原生导航栏 step2:在页面中添加占位元素 自定义导航栏介绍:         一般用于图片等的填充或者其他特殊需求,如果使用纯色填充顶部栏可以直接使用navigati

目录

自定义导航栏介绍:

自定义导航栏的使用

step1:取消默认的原生导航栏

step2:在页面中添加占位元素


自定义导航栏介绍:

        一般用于图片等的填充或者其他特殊需求,如果使用纯色填充顶部栏可以直接使用navigationBarBackgroundColor完成

page.JSON文件:

"navigationBarBackgroundColor": "#FED000"

效果:

自定义导航栏的使用

step1:取消默认的原生导航栏

page.json文件page的style中添加代码

"navigationStyle":"custom"

step2:在页面中添加占位元素

占位高度包括:

                                            评价        
onLoad() {    // 状态栏高度    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;     // 胶囊数据    const { top, height } = wx.getMenuButtonBoundinGClientRect();    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;},

来源地址:https://blog.csdn.net/WX_nbclass/article/details/130126878

--结束END--

本文标题: uniapp小程序自定义顶部导航栏高度适配

本文链接: https://lsjlt.com/news/387202.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • uniapp小程序自定义顶部导航栏高度适配
    目录 自定义导航栏介绍: 自定义导航栏的使用 step1:取消默认的原生导航栏 step2:在页面中添加占位元素 自定义导航栏介绍:         一般用于图片等的填充或者其他特殊需求,如果使用纯色填充顶部栏可以直接使用navigati...
    99+
    2023-08-31
    uni-app 小程序 前端
  • uniapp开发微信小程序自定义顶部导航栏功能实例
    目录自定义导航栏渐变色,先上效果重点来了,导航栏设置渐变色补充:更换图标总结自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏。 比...
    99+
    2022-11-13
    uniapp自定义导航栏高度 uniapp自定义顶部导航栏步骤 uniapp 自定义顶部导航
  • uniapp微信小程序怎么自定义导航栏
    本篇内容介绍了“uniapp微信小程序怎么自定义导航栏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先我们在自定义导航栏的时候,我们需要知...
    99+
    2023-07-02
  • 微信原生小程序自定义顶部导航
    都2023了,自定义顶部导航应该不是什么新鲜事了,这里只是简单记录下 微信自己也提供了自定义顶部导航navigation-bar,大概看了下,可配置的也不少,所以看需求了,如果简单可以采用微信提供的,...
    99+
    2023-09-01
    微信 小程序
  • 微信小程序自定义顶部导航组件
    本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下 在components中新建文件夹navbar components/navbar.wxml <!-...
    99+
    2024-04-02
  • 【uniapp小程序】配置tabbar底部导航栏
    赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏 。 文章目录 🍋前言:🍍正文Tips1、首先我们准...
    99+
    2023-08-17
    uni-app vue.js 小程序
  • uniapp微信小程序自定义导航栏的全过程
    目录前言那么标题栏的高度我们怎么获取呢?献上源码:组件使用:效果图:总结前言 相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们...
    99+
    2024-04-02
  • 【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入
    文章目录 顶部导航栏和底部导航栏设置创建几个需要底部导航栏切换的页面使用阿里巴巴矢量图标库完成底部导航栏tabBar设置页面顶部导航栏标题 样式优化 顶部导航栏和底部导航栏设置 在正式开发小程序的功能之前,首先需要确定小程序...
    99+
    2023-08-16
    uni-app 小程序 apache 导航栏
  • 微信小程序自定义底部导航栏组件
    本文实例为大家分享了微信小程序底部导航栏组件的具体实现代码,供大家参考,具体内容如下 1、在自己项目的公共组件的文件价下新建tabbar.vue(定义的自定义导航栏组件) <...
    99+
    2024-04-02
  • 微信小程序如何自定义导航栏
    小编给大家分享一下微信小程序如何自定义导航栏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!CustomNavBar.wxml&l...
    99+
    2024-04-02
  • 微信小程序实现自定义导航栏
    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 1、要实现自定义导航栏,首先得在全局进行相关配置 app.json页面 "window": {    ...
    99+
    2024-04-02
  • 微信小程序自定义导航栏效果
    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 第一步 添加属性 “navigationStyle”: “cust...
    99+
    2024-04-02
  • uniapp小程序配置tabbar底部导航栏实战指南
    目录前言:正文Tips1、首先我们准备好自己项目所需要的tab图标2、找到我们的pages.json文件进行配置3、配置一下导航栏标题内容4、来看看我们的成果(效果图)总结前言: 配...
    99+
    2024-04-02
  • 微信小程序中怎么自定义导航栏
    本篇文章给大家分享的是有关微信小程序中怎么自定义导航栏,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。step1 自定义第一步 取得导航栏的控制...
    99+
    2024-04-02
  • 微信小程序如何开发顶部导航栏
    这篇文章给大家分享的是有关微信小程序如何开发顶部导航栏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序 开发之顶部导航栏需求:顶部导航栏效果图:wxml:<!--导...
    99+
    2024-04-02
  • 小程序如何改变顶部导航栏颜色
    小程序改变顶部导航栏颜色的方法:1.创建微信小程序项目;2.utils下的app.json文件中修改全局样式即可。具体操作步骤如下:首先在创建一个微信小程序项目。在utils下的app.json文件中找到“window”变量,修改它的“na...
    99+
    2024-04-02
  • uniapp小程序原生导航栏返回按钮-自定义返回路径
    onBackPress(e) { if (e.from == "backbutton") { uni.switchTab({ url: "返回页为tab页面路径", }); uni.navi...
    99+
    2023-09-28
    uni-app 小程序
  • 小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)
    uniapp开发小程序,不同角色/已登录未登录,都有不一样的底部导航栏,这些情况下就需要自行定义tabbar,从而实现动态tabbar的实现。 1.首先我们需要在pages.json配置tabbar...
    99+
    2023-09-02
    uni-app vue.js 前端
  • Bootstrap如何实现渐变顶部固定自适应导航栏
    这篇文章主要介绍Bootstrap如何实现渐变顶部固定自适应导航栏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所示:<!DOCTYPE html>...
    99+
    2024-04-02
  • 微信小程序怎么实现自定义导航栏
    今天小编给大家分享一下微信小程序怎么实现自定义导航栏的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1、要实现自定义导航栏,首...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作