[TOC] > [参考](https://uniapp.dcloud.io/collocation/pages?id=h5-searchinput) ## globalStyle | 属性 | 类型 | 默认值 | 描述 | 平台差异说明 | | --- | --- | --- | --- | --- | | navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 | | | navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black/white | | | navigationBarTitleText | String | | 导航栏标题文字内容 | | | navigationStyle | String | default | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏 | App、支付宝小程序不支持 | | backgroundColor | HexColor | #ffffff | 窗口的背景色 | 微信小程序 | | backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark / light | 微信小程序 | | enablePullDownRefresh | Boolean | false | 是否开启下拉刷新,详见[页面生命周期](https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)。 | | | onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f) | | | animationType | String | pop-in | 窗口显示的动画效果,详见:[窗口动画](https://uniapp.dcloud.io/api/router?id=animation) | App | | animationDuration | Number | 300 | 窗口显示动画的持续时间,单位为 ms | App | | usingComponents | Object | | 引用小程序组件,参考[小程序组件](https://uniapp.dcloud.io/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81) | 微信小程序、App | ## pages/style 设置后会覆盖 globalStyle 新增 | 属性 | 类型 | 默认值 | 描述 | 平台差异说明 | | --- | --- | --- | --- | --- | | app-plus | Object | | 设置编译到 App 平台的特定样式,配置项参考下方[app-plus](https://uniapp.dcloud.io/collocation/pages?id=app-plus) | App | | h5 | Object | | 设置编译到 H5 平台的特定样式,配置项参考下方[H5](https://uniapp.dcloud.io/collocation/pages?id=h5) | H5 | ## pages/style/app-plus | 属性 | 类型 | 默认值 | 描述 | 平台兼容 | | --- | --- | --- | --- | --- | | titleNView | Object | | 导航栏 ,详见:[导航栏](https://uniapp.dcloud.io/collocation/pages?id=app-titlenview) | App、H5 | | subNVues | Object | | 原生子窗体,详见:[原生子窗体](https://uniapp.dcloud.io/collocation/pages?id=app-subnvues) | App 1.9.10+ | | scrollIndicator|String||滚动条显示策略,设置为 "none" 时不显示滚动条|。App| * `.nvue`页面仅支持`titleNView`配置,其它配置项暂不支持 ## pages/style/app-plus/subNVues 原生子窗口 ``` "subNVues": [{ "id": "demo", "path": "update/pages/update/demo.nvue", //配置 nvue 文件路径,nvue 文件需放置到使用 subNvue 的页面文件目录下 "type": "popup", //'popup',弹出层;"navigationBar",导航栏 "style": { "position": "absolute", "width": "50%", "height": "100%", "top": "0%", //bottom,left,right //偏移量 "margin": "", "zindex": 10 } }] ``` ### page/app-plus/pullToRefresh 下拉刷新 * `subNVues`的`id`是全局唯一的,不能重复 * 可以通过[uni.getSubNVueById('id')](https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid)获取`subNVues`的实例 * `subNVues`的`path`属性只能是`nvue`文件路径 * `enablePullDownRefresh`与`pullToRefresh->support`同时设置时,后者优先级较高。 * 如果期望在 App 和小程序上均开启下拉刷新的话,请配置页面的`enablePullDownRefresh`属性为 true ## pages/style/app-plus/titleNView 导航栏 ``` "titleNView":{ "titleText":"测试", // "titleColor":"", //标题文字颜色 // "backgroundColor":"red", // 背景颜色 只有 h5 生效 // "titleSize":"" , //标题文字大小 "type":"default", //导航栏样式。"default"-默认样式;"transparent"-透明渐变 "buttons":[], "searchInput":{} } ``` ## pages/style/app-plus/titleNView/buttons 导航栏 ``` "buttons":[ { "type":"share",//["forward","back","share","favorite","home","menu","close","none"]//none时,字体库设置 "text":"分享", "titleColor":"red", // "color":"", //按钮颜色 "badgeText":"3", //按钮上的角标 "float":"left", //["left","right"] "select":"true" //向下箭头 // "width":"",//不支持 upx }, ``` ## pages/style/app-plus/titleNView/searchInput 搜索框 ``` "searchInput":{ "autoFocus":"false",//是否自动聚焦 "align":"center",//默认 center ,left,right "backgroundColor":"rgba(255,255,255,0.5)", "borderRadius":"0px",//搜索框圆角 "placeholder":"",//提示文字 "disabled":false//是否不可输入 } ```