uni-app自定义导航栏

简介: uni-app自定义导航栏

1:去掉导航栏

"navigationStyle":"custom"

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


2:导航栏搜索框

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


{
        "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"
                                        }
                                }
                            } 
        }
    }
相关文章
|
7月前
|
XML Java Android开发
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
125 1
|
7月前
|
XML 搜索推荐 Java
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
71 0
|
7月前
|
XML 前端开发 Java
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
106 1
|
4月前
|
安全 前端开发 API
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
|
4月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
2月前
|
移动开发 小程序 测试技术
自定义多级联动选择器指南(uni-app)
在本文中,探讨了如何在uni-app中创建自定义多级联动选择器组件。这个组件具有强大的多端支持,可适用于H5、APP、微信小程序、支付宝小程序等多种平台。
44 1
自定义多级联动选择器指南(uni-app)
|
2月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
96 9
|
2月前
|
前端开发 UED 开发者
uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)
本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。
|
4月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
4月前
|
PHP 开发工具 git
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法

热门文章

最新文章