uniapp——头部导航栏配置

2021-10-12  本文已影响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"

上一篇下一篇

猜你喜欢

热点阅读