美文网首页
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——头部导航栏配置

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