赞
踩
导航栏自定义加需要吸顶产生的问题
如上图直接使用并不能出现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)
- },
经过上述处理就可以出现吸顶效果了
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。