配置uni-app导航栏上的搜索框

Posted 山石

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了配置uni-app导航栏上的搜索框相关的知识,希望对你有一定的参考价值。

page下的style选项根据官方文档配置即可

https://uniapp.dcloud.io/collocation/pages?id=pages

 

例子:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                 "app-plus":{
                     "titleNView":{
                         "searchInput":{
                             "align":"center",
                             "backgroundColor":"#eee",
                             "borderRadius":"5px", // 只能用px作单位
                             "placeholder":"请输入内容",
                             "placeholderColor":"#ccc"
                         }
                     }
                 }
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

 

效果:

 

以上是关于配置uni-app导航栏上的搜索框的主要内容,如果未能解决你的问题,请参考以下文章

配置 uni-app 导航栏上按钮

微信小程序使用uni-app——开发首页搜索框导航栏(可同时兼容APPH5小程序)

uni-app 顶部配置搜索框和左右图标

如何禁用 URL 栏上的导航

操作栏上不确定的进度条上的空指针异常

uni-app 顶部标题栏定制按钮如何做?