小程序如何自定义导航栏10bet?

来源:http://www.chinese-glasses.com 作者:Web前端 人气:85 发布时间:2020-04-29
摘要:时间: 2019-09-19阅读: 104标签: 导航状态栏 需求 通过调用 wx.getSystemInfoSync获取 产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺

时间: 2019-09-19阅读: 104标签: 导航状态栏

需求

通过调用 wx.getSystemInfoSync获取

产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。

const res = wx.getSystemInfoSync()this.setData({ statusBarHeight:res.statusBarHeight})

需求分析并制定方案

导航栏

这产品和UI都提需求了,咱也不能反驳哈,所以开始调研,分析可行性方案;1、可以添加悬浮按钮。2、自定义导航栏。添加悬浮按钮,是看起来是比较简单哈,但是感觉不太优雅,会占据页面的空间,体验也不太好。所以想了下第二种方案,自定义导航栏既可以实现产品的需求还可以满足UI的设计美感,在顶部空白处加上返回首页的按钮,这样和返回按钮还对称(最终如图所示,顶部导航栏是个背景图片,分两块组合起来)。

通过获取右上角胶囊的位置信息计算,navBarPadding为导航栏上下的间隙

实现方案

let res = wx.getMenuButtonBoundingClientRect()let navBarPadding = (res.top - this.data.setStatusBarHeight) * 2 this.setData({ navBarHeight: res.height + navBarPadding})

一、实现的前提

代码

1、首先查看文档,看文档里关于自定义导航栏是怎么规定的,有哪些限制;还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。

app.js:

2、在app.json window 增加 navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮,如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

App({ onLaunch () { this.setStatusBarHeight() this.setNavBar() }, //设置系统状态栏高度 setStatusBarHeight(){ try { const res = wx.getSystemInfoSync() this.globalData.statusBarHeight = res.statusBarHeight }catch(error){ console.log(error) } }, //设置导航栏height setNavBar(){ let res = wx.getMenuButtonBoundingClientRect() let navBarPadding = (res.top - this.data.setStatusBarHeight) * 2 this.globalData.navBarHeight = res.height + navBarPadding }, globalData: { statusBarHeight: 20, navBarHeight: 44 }})

3、还要考虑加返回按钮和返回首页的按钮,适配不同的机型

wxml:

先说下两种配置方法:

view  view  自定义导航栏 /view/view

①全局配置navigationStyle:

wxss:

调试基础库>=1.9.0

.top-bar-wrap{ z-index: 9999; position: fixed; top: 0; left: 0; width: 100%;}.top-bar-main{ width: 100%; display: flex; justify-content: center; align-items: center; color:#fff;}

微信客户端>=6.6.0

10bet,js:

{ "usingComponents": { "navigationBar": "/components/navigationBar/navigationBar" }, "window": { "navigationStyle": "custom" } }
const app = getApp()Component({ data: { statusBarHeight: app.globalData.statusBarHeight, navBarHeight: app.globalData.navBarHeight }})

②单页面配置navigationStyle

最后

调试基础库>=2.4.3

setStatusBarHeight、setNavBar这两个方法最好写到app.js中,获取好放在app.globalData中,这两个高度可能不止自定义导航栏需要用到。

微信客户端版本>=7.0.0

本文由10bet发布于Web前端,转载请注明出处:小程序如何自定义导航栏10bet?

关键词:

频道精选

最火资讯