在 uniapp uview 中结合使用 u-navbar 和 u-sticky 组件。
最编程
2024-04-19 21:25:02
...
导航栏自定义加需要吸顶产生的问题
如上图直接使用并不能出现tab栏吸顶效果,那是由于u-sticky组件吸顶时与顶部的距离默认为0
那么做如下处理
<u-sticky :offset-top="navbarHeight()">
<u-tabs :list="helpTabList" active-color="#D01F25" :current="helpTabCurrent"
@change="helpChange"></u-tabs>
</u-sticky>
// 参考uview导航栏的高度,用来设定吸顶时与顶部的距离,h5不需要操作
navbarHeight() {
let systemInfo = uni.getSystemInfoSync();
/* (750 / systemInfo.windowWidth) */
/* 在uview navBar组件中有一个默认高度,当这个默认高度加上状态栏高度后就是吸顶的位置,由于这两者相加是px,所以最后还需要转为rpx */
let topHeight=0
// #ifdef APP-PLUS
topHeight = 44 + systemInfo.statusBarHeight;
// #endif
// #ifdef MP
let height = systemInfo.platform == 'ios' ? 44 : 48;
topHeight = height + systemInfo.statusBarHeight
// #endif
/* 最后一步将px转为rpx */
return topHeight * (750 / systemInfo.windowWidth)
},
经过上述处理就可以出现吸顶效果了
推荐阅读
-
在 uniapp uview 中结合使用 u-navbar 和 u-sticky 组件。
-
openEuler郑州用户组成立!openEuler与hyperfusion携手共建河南地区用户生态 - 开幕致辞 超融合操作系统业务总经理、openEuler委员会成员蒋振华先生为本次活动致辞。 在本次活动的致辞中,他提到,作为openEuler社区早期的成员,超融合见证了openEuler从成立到在各行业商业落地,再到跨越生态拐点的过程,感谢openEuler提供了一个全产业链共同创新的平台,共同推动创新技术的商业落地。 同时,本次活动得到了郑州市郑东新区大数据管理局、郑州中原科技城投资服务局的大力支持。 郑东新区大数据管理局曹光远 在活动致辞中表示,openEuler的应用和*应用设施的深度优化,为郑东新区数字化转型提供了安全、可靠、高性能的技术基础;郑州中原科技城招商服务局王林表示,郑东新区欢迎所有openEuler生态相关企业扎根当地,围绕openEuler社区共同发展,形成合力。 openEuler社区及运维功能介绍 openEuler技术委员会委员胡峰 openEuler技术委员会委员胡峰先生在本次活动中介绍了openEuler社区目前发展的整体情况,并重点从技术层面介绍了openEuler的运维功能。 openEuler 晚会 胡峰先生介绍智能运维工具 A-Ops 和 openEuler gala、 阿波罗 Apollo、智能漏洞管理解决方案等新功能,以及涵盖各种运维场景的精品运维组件。在*交流环节,许多用户就目前使用的 openEuler 在*交流环节,许多用户就自己在使用openEuler过程中遇到的一些问题与胡峰先生进行了进一步的交流。 软硬结合,构建多样化算力操作系统 Hyperfusion 基于 openEuler 的基础上,结合自身软硬件技术积累,推出了富讯服务器操作系统 FusionOS FusionOS. FusionOS 首席架构师张海亮 分享了 FusionOS FusionOS首席架构师张海亮分享了FusionOS的软硬件协同优势、卓越的性能和可靠性,以及FusionOS在金融、运营商、*、互联网等行业的实践案例,引起了众多用户的兴趣,分享结束后,不少参会者就FusionOS的特点向讲师提问并进行了交流。
-
在uniapp中,探索和运用多样化的uview Form组件库进行表单操作