【uni |
您所在的位置:网站首页 › 自定义背景怎么取消 › 【uni |
目录
前言什么是自定义导航栏自定义导航栏取消默认导航栏或原生导航栏全局取消原生导航栏单页面取消原生导航栏取消原生导航栏后是这样的
自定义导航栏
自定义导航栏组件
前言
Hbuilder X 2.7.14.20200618
什么是自定义导航栏
默认导航栏或原生导航栏是啥样的,你懂的。 但,我想给导航栏加个背景图,比如这样: 我想给导航栏背景设置成渐变,比如这样: 这时候就需要自定义导航栏。 自定义导航栏自定义导航栏的中心思想是: 取消默认导航栏或原生导航栏。自定义导航栏,并放置到正确位置。 取消默认导航栏或原生导航栏取消默认导航栏或原生导航栏有两个方式: 全局取消原生导航栏单页面取消原生导航栏 全局取消原生导航栏在 pages.json 的 globalStyle 里有个 navigationStyle 配置项,默认是default。navigationStyle=default 时,所有页面均为原生导航栏;navigationStyle=custom时,所有页面都没有原生导航栏。 ... "globalStyle": { ... "navigationStyle": "custom", ... }, ... 单页面取消原生导航栏在 pages.json 的 pages 配置项下每个页面均有个 navigationStyle 配置项,默认是default。navigationStyle=default 时,该页面均为原生导航栏;navigationStyle=custom时,该页面都没有原生导航栏。 ... "pages": [ { "path" : "pages/index/index", "style" : { "navigationBarTitleText" : "首页", "navigationStyle":"custom", ... } }, ... ], ... 取消原生导航栏后是这样的取消原生导航栏后,页面顶部直通状态栏区域。 由于窗体为沉浸式,因此页面占据了状态栏位置,导致页面顶部直通状态栏区域。 注意:在微信小程序里,右上角始的胶囊按钮不受取消原生导航栏设置的影响。 自定义导航栏自定义导航栏可以理解为出现在原生导航栏区域的页面元素。 假设要在导航栏中添加LOGO,实现如下效果: 在 pages.json 的 pages 配置项下, 修改 pages/index/index 页面的配置如下: "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "navigationStyle":"custom" } } ], pages/index/index 代码为 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |