UNI-APP添加顶部导航栏并且更换图标

àì夳堔傛蜴生んèń 2022-12-05 15:17 204阅读 0赞

### 在page.json里的配置项 ###

{
                "path": "pages/my/index",
                "style": {
                    "app-plus": {
                        "titleNView": {
                            "buttons": [{
                                    "text": "\ue605",
                                    "fontSrc": "/static/iconfont.ttf",
                                    "fontSize": "22px",
                                    "float": "left"
                                },
                                {
                                    "text": "\ue606",
                                    "fontSrc": "/static/iconfont.ttf",
                                    "fontSize": "22px"
    
                                }
                            ]
                        }
                    }
                }
            },

### 更换图标 ###

1.在阿里巴巴矢量图选择自己喜欢的图标，然后点击收藏

![e4d6c78274efcee0dc80cc2bf0ab946e.png][]

收藏图标

2.右上角下载全部已经收藏了的图标

![e3d067b81ed3e55ee34c7a4992842687.png][]

下载

3.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到static文件夹里，然后再打开iconfont.css里查看unicode编码

![907cbb3f53bd8e1f7d2ff8dd8c525b6c.png][]

unicode编码

4.最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\\u\*\*\*"，然后重启就实现了

5.最后在对应的页面生命周期方法里填写，通过e.index，来配置不同的方法

onNavigationBarButtonTap:function(e){
                console.log(JSON.stringify(e))
            },

[e4d6c78274efcee0dc80cc2bf0ab946e.png]: /images/20221123/3614a0b1431e405fb119f6827007b240.png
[e3d067b81ed3e55ee34c7a4992842687.png]: /images/20221123/2f619f481f124ac6b29e8e28d7680c72.png
[907cbb3f53bd8e1f7d2ff8dd8c525b6c.png]: /images/20221123/6169e0d186d54d82909f556470e1e926.png