Uniapp开发鸿蒙应用教程之自定义导航栏

连续分享了几天的Uniapp跨平台开发鸿蒙应用教程的文章，相信大家对跨平台开发已经有了初步的了解，今天分享一下跨平台开发中的自定义导航栏。
在Hbuilder的初始化项目中是自带了导航栏的，这是一个全局的导航栏，它的样式设置和修改是在全局的配置文件pages.json中进行。

现在打开pages.json文件，在globalStyle中有一些关于导航栏的属性，我们尝试修改一下：
 

1. {
2. "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
3.                 {
4. "path": "pages/index/index",
5. "style": {
6. "navigationBarTitleText": "uni-app"
7.                         }
8.                 }
10.         ],
11. "globalStyle": {
12. "navigationBarTextStyle": "black",
13. "navigationBarTitleText": "自定义导航栏",
14. "navigationBarBackgroundColor": "#F8F800",
15. "backgroundColor": "#F8F8F8"
16.         },
17. "uniIdRouter": {}
18. }

复制代码

 
然后看到导航栏已经发生了改变：
 

 
这样的修改很方便很便捷，但是好像只有颜色和文字这些基础的属性可以修改，很多时候我们需要在导航栏上添加一些组件，比如按钮或者搜索框。
 
对于这种情况，uniapp也提供了相应的设置方案，还是在pages.json文件中，当我们需要为某一个页面的导航栏添加组件，就在对应的path路径下设置style，style中有个titleNView属性就是为导航栏添加自定义组件，像这样：

1. "path": "pages/index/index",
2. "style": {
3. <view >
4.   <input
6. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
7. </view> "navigationBarBackgroundColor": "#00c170",
8. <view >
9.   <input
11. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
12. </view> "app-harmony": {
13. <view >
14.   <input
16. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
17. </view><view >
18.   <input
20. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
21. </view><view >
22.   <input
24. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
25. </view> "softinputMode": "adjustPan"
26. <view >
27.   <input
29. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
30. </view> },
31. <view >
32.   <input
34. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
35. </view> "app-plus": {
36. "titleNView": {
37.         <view >
38.   <input
40. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
41. </view> "buttons": [{
42. "text": "搜索",
43. "fontSize": "16",
44.         <view >
45.   <input
47. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
48. </view><view >
49.   <input
51. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
52. </view><view >
53.   <input
55. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
56. </view><view >
57.   <input
59. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
60. </view>"float": "right",
61.         <view >
62.   <input
64. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
65. </view><view >
66.   <input
68. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
69. </view><view >
70.   <input
72. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
73. </view><view >
74.   <input
76. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
77. </view>"color": "#fff"
78.         <view >
79.   <input
81. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
82. </view><view >
83.   <input
85. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
86. </view>}],
87. "searchInput": {
88. "align": "center",
89. "placeholder": "请输入信息",
90. "backgroundColor": "#fff",
91. "placeholderColor": "#000"
92. }
93. <view >
94.   <input
96. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
97. </view><view >
98.   <input
100. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
101. </view>}
102. <view >
103.   <input
105. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
106. </view>}
107. }

复制代码

 
但是幽蓝君亲测这种设置方式在浏览器运行时可以正常显示，在鸿蒙中是无效的：
 

 
所以在鸿蒙开发中我们需要自己定义导航栏。
 
再次回到pages.json文件，这次将navigationStyle设置成custom，作用是取消原生的导航栏：

1. "path": "pages/index/index",
2. "style": {
3. <view >
4.   <input
6. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
7. </view>"navigationStyle": "custom"
8. }

复制代码

 
然后打开需要自定义导航栏的页面，我这里就直接在首页index.vue中操作，实现逻辑比较简单，就是在页面顶部添加一个导航栏大小的组件，然后在其中添加搜索框，相关代码如下：

1. <view >
2.   <input
4. placeholder="请输入搜索内容" placeholder- confirm-type="search" @input="navSearchAction" />
5. </view>

复制代码

1. .custom-nav-bar {
2. display: flex;
3. justify-content: space-between;
4. align-items: center;
5. height: 54px;
6. /* 根据需要调整高度 */
7. background-color: #f8f8f8;
8. /* 导航栏背景色 */
9. /* 其他样式属性 */
10. padding: 30px 12px 0px 12px;
11. align-items: center;
12. justify-content: center;
13. }

复制代码

 
看一下运行效果：
 

今天就以添加一个搜索框为例，大家如果需要自定义其他的样式也是类似的实现方式。
以上就是uniapp跨平台开发鸿蒙应用中的自定义导航栏，感谢大家的阅读。
 #鸿蒙三方框架##Uniapp##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！