小步伐相干

1.右侧胶囊宽度，胶囊和文本重合问题

1. // #ifdef MP-WEIXIN
2. // 获取胶囊左边界坐标
3. const { left } = uni.getMenuButtonBoundingClientRect()
4. this.rightSafeArea = left + 'px'
5. // #endif
7. //给到你的内容宽度
8. <view :style="{'max-width':rightSafeArea}">

复制代码

2.在uview组件上修改样式不会见效，需要在外面套view
或者是在小步伐开发工具中看下没有见效的view样式类名，用::v-deep写样式，h5和小步伐用条件编译
3.顶部导航栏
顶部为搜索栏，可以获取胶囊信息设置

1. const { height, top } = uni.getMenuButtonBoundingClientRect()
2. let statusBarHeight
3. uni.getSystemInfo({
4.         success: (e) => {
5.         statusBarHeight=e.statusBarHeight
6.     }
7. })
8. this.height= height + (top - statusBarHeight) * 2;

复制代码

顶部为左侧返回按钮，中心为文本

1. statusBar = e.statusBarHeight
2. const custom = wx.getMenuButtonBoundingClientRect()
3. customBar = custom.bottom + custom.top - e.statusBarHeight
4. //整个导航栏高度
5. :style="{'height':customBar+'px'}"
6. //标题内容
7. :style="{'line-height':statusBar+'px','margin-top':(customBar/2)+'px'}"

复制代码

4.小步伐底部占位
底部安全间隔padding-bottom: env(safe-area-inset-bottom);

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。