uniapp uses app-plus to customize the navigation bar (titleNView) with a custom icon + text button on the right side

foreword

• Recently, when using uni-app to write the H5 mobile terminal, when configuring the icon of the navigation bar in the pages.json file, it is found that it does not take effect

• I went to the official website to check for a long time, which means that it does not support local pictures, but supports iconfont.ttf (local download of iconfont) format pictures

• It means that the icon in the navigation bar needs to be found in the iconfont icon library to be downloaded and placed in the project resource folder in a local form

titleNView configuration

 

Implementation process

1. Log in to the iconfont icon library website to find icon downloads- iconfont-Alibaba vector icon library

 

2. Put the downloaded and decompressed file under the static file - the file structure inside is like this

 

3. Configure the text icon in the navigation bar under the pages.json file

 

4. Click index.html under the download file structure to view the download icon format in the browser

 

5. Finally, you can monitor whether the right button is clicked on the page to continue the follow-up operation - come to the page with this navigation bar

data平级位置
onNavigationBarButtonTap(e) {
    console.log("点击了自定义按钮"，e);
},

6. Rendering

 

Summarize:

---

After this process, I believe you also have a preliminary deep impression on uniapp using the custom icon + text button on the right side of the app-plus custom navigation bar (titleNView), but in actual development, the situation we encountered must be different. The same, so we have to understand its principle, and it remains the same. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen