栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

微信小程序自定义navigationBar顶部导航栏,兼容安卓ios

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

微信小程序自定义navigationBar顶部导航栏,兼容安卓ios

1.设置导航栏自定义"navigationStyle":"custom"

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/begin/begin",
			"style": {
				"navigationStyle":"custom"
			}
		},

效果如图

2. 获取胶囊按钮的布局信息

用wx.getMenuButtonBoundingClientRect()获取胶囊按钮信息,官方文档:Object wx.getMenuButtonBoundingClientRect() | 微信开放文档

const res = wx.getMenuButtonBoundingClientRect()

 

3.获取系统信息 wx.getSystemInfoSync() 官方文档:Object wx.getSystemInfoSync() | 微信开放文档

const systemInfo = wx.getSystemInfoSync();

 4.导航栏高度计算公式:

导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度

			const systemInfo = wx.getSystemInfoSync();
			const res= wx.getMenuButtonBoundingClientRect();
			this.height = (res.top - systemInfo.statusBarHeight) * 2 + res.height
export default {
		data() {
			return {
				height: '',
				background: {
					background: 'url(https://dangke.dcyu.com/assets/img/video_top_bg.png) no-repeat',
					backgroundSize: 'cover'
				}
			};
		},

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/666675.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号