uniapp uview里面的u-navbar结合u-sticky组件的使用

本文主要是介绍uniapp uview里面的u-navbar结合u-sticky组件的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

导航栏自定义加需要吸顶产生的问题

如上图直接使用并不能出现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-PLUStopHeight = 44 + systemInfo.statusBarHeight;// #endif// #ifdef MPlet height = systemInfo.platform == 'ios' ? 44 : 48;topHeight = height + systemInfo.statusBarHeight// #endif/* 最后一步将px转为rpx */return topHeight * (750 / systemInfo.windowWidth)},

经过上述处理就可以出现吸顶效果了

 

这篇关于uniapp uview里面的u-navbar结合u-sticky组件的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---