Uniapp开发鸿蒙应用教程之自定义导航栏
【摘要】 连续分享了几天的Uniapp跨平台开发鸿蒙应用教程的文章，相信大家对跨平台开发已经有了初步的了解，今天分享一下跨平台开发中的自定义导航栏。在Hbuilder的初始化项目中是自带了导航栏的，这是一个全局的导航栏，它的样式设置和修改是在全局的配置文件pages.json中进行。现在打开pages.json文件，在globalStyle中有一些关于导航栏的属性，我们尝试修改一下：{"pages":...
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "自定义导航栏",
"navigationBarBackgroundColor": "#F8F800",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
"path": "pages/index/index",
"style": {
"navigationBarBackgroundColor": "#00c170",
"app-harmony": {
"softinputMode": "adjustPan"
},
"app-plus": {
"titleNView": {
"buttons": [{
"text": "搜索",
"fontSize": "16",
"float": "right",
"color": "#fff"
}],
"searchInput": {
"align": "center",
"placeholder": "请输入信息",
"backgroundColor": "#fff",
"placeholderColor": "#000"
}
}
}
}
"path": "pages/index/index","style": { "navigationStyle": "custom"}<view class="custom-nav-bar">
<input
style="width: calc(100% - 40px);background-color: white;height: 35px;padding: 0px 10px;border-radius: 18px;"
placeholder="请输入搜索内容" placeholder-style="#000" confirm-type="search" @input="navSearchAction" />
</view>
.custom-nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 54px;
/* 根据需要调整高度 */
background-color: #f8f8f8;
/* 导航栏背景色 */
/* 其他样式属性 */
padding: 30px 12px 0px 12px;
align-items: center;
justify-content: center;
}
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）