美文网首页
uniapp——头部导航栏配置

uniapp——头部导航栏配置

作者: 上海_前端_求内推 | 来源:发表于2021-10-12 11:24 被阅读0次

示例图:

image

在page.json配置即可

image
<pre style="margin: 0px; padding: 0px; overflow: auto; font-family: &quot;Courier New&quot;; font-size: 12px; word-wrap: break-word;">{
            "path": "pages/index/logs",
            "style": {
                "navigationBarTitleText": "日志",
                "app-plus": {
                    "titleNView": {
                        "buttons": [{
                                "text": "德基店",
                                "fontSize": "14px",
                                "color": "#222"
                            },{
                                "text": "\ue672",
                                "fontSrc": "/static/uni.ttf",
                                "fontSize": "18px",
                                "color": "#222"
                            },{
                                "type": "share",
                                "fontSize": "20px"
                            }
                        ]
                    }
                }
            }
        },</pre>

自定义页面跳转

<pre style="margin: 0px; padding: 0px; overflow: auto; font-family: &quot;Courier New&quot;; font-size: 12px; word-wrap: break-word;">onNavigationBarButtonTap(e) { //监听自定义导航栏按钮跳转页面
      uni.navigateTo({
         url:'jsHistoryAdjustment'
      })
 },</pre>

** 右侧按钮宽度调整**

image

用宽度调整文字和图标之间的距离:"width": "80px"

相关文章

  • uniapp——头部导航栏配置

    示例图: 在page.json配置即可 自定义页面跳转 ** 右侧按钮宽度调整** 用宽度调整文字和图标之间的距离...

  • uniapp 导航栏和状态栏设置

    1. 全局、局部导航栏和状态栏配置 参考官网:https://uniapp.dcloud.io/collocati...

  • Vue 实现一个头部导航栏

    一个移动端的前端肯定是需要头部导航栏的,头部导航栏需要通过路由知道是否要显示返回按钮,并且根据底部导航栏改变tit...

  • 小程序入门(二)

    底部导航配置及头部标题栏配置,(纠结死不知道写点啥。快快来人给我推荐推荐啊?) 1、 app.json配置-...

  • TableView 头部下拉放大

    功能:下拉tableView 头部放大 ,上拉头部渐隐,显示导航栏 效果图: 显示导航栏B0C9B786-B10D...

  • uniapp 原生导航栏

    在项目开发中, 想要自定义一个导航栏, 做完之后发现坑还是不少 需求: 导航栏添加搜索框与搜索图标 pages.j...

  • uniapp取消导航栏

    全局取消原生导航栏 在pages.json的globalStyle里,有个navigationStyle设置,默认...

  • uniapp自定义导航栏

    这里说的导航栏解决的问题是手机顶部状态栏区域不被页面内容覆盖。uniapp项目,小程序都可以使用官方给的默认导航栏...

  • 仿掘金项目顶部导航

    顶部导航之网站logo 添加导航菜单 导航栏右侧登录注册按钮 头部美化 自定义样式

  • React-router 4 做全屏式的 404 页面

    问题:页面有左侧导航栏的或者头部导航栏的页面,想做一个全屏的 404页面。

网友评论

      本文标题:uniapp——头部导航栏配置

      本文链接:https://www.haomeiwen.com/subject/jzydoltx.html