前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uni-app自定义导航栏

uni-app自定义导航栏

作者头像
王小婷
发布2020-01-15 16:59:01
1.2K0
发布2020-01-15 16:59:01
举报
文章被收录于专栏:编程微刊

1:去掉导航栏

代码语言:javascript
复制
"navigationStyle":"custom"

打开pages.json配置文件,找到自定义导航栏的页面,在页面的style里面设置导航栏样式navigationStyle属性。

2:导航栏搜索框

在导航栏里面,可以看到有些顶部导航栏需要一个搜索框的,类似于这样的,实现起来也很简单,需要在pages.json配置文件文件里面进行配置即可。

代码语言:javascript
复制
{
        "path": "pages/main/main",
        "style": {
            "navigationBarTitleText": "首页",
            "app-plus": {
                                "bounce": "none",
                                "titleNView": {
                                    "buttons": [ 
                                        {
                                            "text": "补卡", 
                                            "fontSize":"15",
                                            "float": "right",
                                            "color":"#fff"
                                        },
                                        {
                                            "text": "通知", 
                                            "fontSize":"15",
                                            "float": "left",
                                            "color":"#fff"
                                        }
                                    ],
                                    "searchInput":{
                                            "align": "center",
                                            "placeholder": "2020-01-06",
                                            "borderRadius":"50upx",
                                            "backgroundColor": "#fff"
                                        }
                                }
                            } 
        }
    }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档