首页 >> 大全

小程序自定义导航栏 + 加菜单功能

2023-10-02 大全 34 作者:考证青年

定义效果图比如这样

如果不自定义效果图就是这样:打开第二页就会有个返回键

这个是我本人的,前端技术QQ交流群,有不会的问题,可以在在群里面问:

一、如何自定义:

小程序自定义导航栏 + 加菜单功能__小程序自定义导航栏 + 加菜单功能

1.打开app.json 如下箭头所示

2.如果你自定义导航栏了,整个小程序就会沉浸到这个手机,整个手机屏幕都会是小程序。

3.如果你你的导航栏是公用的,可以开发个组件。

4.既然你是自定义导航栏 就需要解决手机适配的问题,每一款的手机导航栏可能不一样。

这里重新阐述一下 如果你想做的精确一些 还是用 获取微信胶囊的api来计算距离

1. wx.()

获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。

2.也可以根据机型来计算距离

//获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)wx.getSystemInfo({success: (res) => {let totalTopHeight = 68//安卓if (res.model.indexOf('iPhone X') !== -1) {totalTopHeight = 88//iphone x} else if (res.model.indexOf('iPhone') !== -1) {totalTopHeight = 64 //iphone}this.globalData.phoneBarHeight = res.statusBarHeightthis.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight// console.log('整个::'+totalTopHeight+'标题bar---'+this.globalData.titleBarHeight)// this.globalData.screenHeight = res.screenHeight}})

5.你可以根据上面获取的手机导航栏高度 来处理 自定义的导航栏的样式,比如-top、。

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了