好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

uni-app 页面顶部栏固定悬浮的 css 兼容方法

爱站云 2021-04-15 技术教程 0 评论

uni-app 中 NavigationBar(导航栏 44px)以及 TabBar(底部选项卡 50px)组件的高度是固定的,不可修改,各小程序平台,包括同小程序平台的 iOS 和 Android 的高度也不一样。

image.png

那么如果我们需要悬浮导航菜单则需要使用 position: sticky 来使其悬浮,然后对于 H5 平台加上 top:44px 的高度,这样 uni-app 页面顶部导航栏的固定悬浮就实现了兼容,具体的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.menu {
	position: sticky;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	z-index: 999;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background-color: #ffffff;}

以上代码纯属子凡开发中简单的需要稍微注意的地方,仅供大家学习参考。

其中 position: fixed 虽然也可以悬浮固定,但是底部的元素就无法继承 top 的值了,可以简单说 fixed 是特殊版的 absolute,fixed 元素总是相对于 body 定位的。所以就需要使用 position: static,static(没有定位)是 position 的默认值,元素处于正常的文档流中,会忽略 left、top、right、bottom 和 z-index 属性。

< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

酷站网爱站云 官方QQ群:333914614


本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
«   2021年5月   »
12
3456789
10111213141516
17181920212223
24252627282930
31
网站分类
搜索
最新留言
文章归档
标签列表