配置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"
    }
}

效果:

原文地址:https://www.cnblogs.com/luguankun/p/11517871.html

时间: 2024-08-30 13:52:42

配置uni-app导航栏上的搜索框的相关文章

小程序配置单个页面导航栏的属性(微信小程序交流群:604788754)

配置单个页面导航栏的属性: 就在所要配置页面相对应的json文件中写入以下想要设置的属性: { "navigationBarBackgroundColor": "#ffffff",    "navigationBarTextStyle": "black",    "navigationBarTitleText": "小程序" } 属性只需要放在大括号里面即可,每个属性用逗号隔开. 如果不

导航栏上添加searchBar

导航栏有个titleView的属性, @property(nonatomic,retain) UIView          *titleView; 因此可以写个类,继承自UIView,然后再view上添加需要的控件. 在写一句: self.navigationItem.titleView=search; 就可以达到在导航栏上添加searchBar了. 具体代码如下: 新建类:SearchBarView.m - (instancetype)initWithFrame:(CGRect)frame

导航栏上字体与图标的颜色设置

//导航栏上背景色  self.navigationController.navigationBar.barTintColor = RGB(117, 178, 240); //导航栏上自己添加的控件的颜色     self.navigationController.navigationBar.tintColor = [UIColor whiteColor]; //导航栏上字体的颜色     self.navigationController.navigationBar.titleTextAttr

iOS 设置导航栏的颜色和导航栏上文字的颜色

#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @end #import "AppDelegate.h" #import "KeyViewController.h" @interface AppDelegate () @end

Win10系统任务栏显示Cortana搜索框的设置方法

我们都知道Win10系统带有Cortana搜索功能,并且可以进行语音输入,要找文件或者软件程序非常的方便.那么怎么在任务栏上显示Cortana的搜索功能呢?下面就来介绍一下Cortana搜索功能怎么在任务栏上设置打开显示或者关闭. Win10任务栏上Cortana搜索设置打开显示或隐藏的方法 1.右键点击任务栏,找到"Cortana",会发现Cortana搜索功能是被默认隐藏的,我们只需要选择下面两个即可.2."显示Cortana图标"就是只有一个图标,"

Android ActionBar完全解析,使用官方推荐的最佳导航栏(上)

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/18234477 本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工,英文好的朋友也可以直接去读原文. http://developer.android.com/guide/topics/ui/actionbar.html Action Bar是一种新増的导航栏功能,在Android 3.0之后加入到系统的API当中,它标识了用户当前操作界面的位置,并提供了额外的用

【转】Android ActionBar完全解析,使用官方推荐的最佳导航栏(上)

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/18234477 本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工,英文好的朋友也可以直接去读原文. http://developer.android.com/guide/topics/ui/actionbar.html Action Bar是一种新増的导航栏功能,在Android 3.0之后加入到系统的API当中,它标识了用户当前操作界面的位置,并提供了额外的用

jquery自定义插件-参数化配置多级菜单导航栏插件

1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. 使用插件时,可以修改默认参数,目前插件提供了设置菜单的分布方式:横向或纵向:菜单的位置:依赖上一级菜单栏的定位:上下左右定位. 修改调用参数,将一二级菜单改为纵向排列:并将三级菜单的显示位置改为二级菜单栏的右侧(其他的和默认保持一致),修改后运行效果如下图: 细心的观察,会发现上面两个菜单导航栏的

配置uni-app导航栏上按钮

查看uni-app官网,buttons配置即可 例子: { "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "app-plus": { "titleNView": { "searchInp