小程序相关 - 技术栈

小程序相关

院人冲冲冲2025-01-11 16:29

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

javascript 复制代码

// #ifdef MP-WEIXIN
// 获取胶囊左边界坐标
const { left } = uni.getMenuButtonBoundingClientRect()
this.rightSafeArea = left + 'px'
// #endif

//给到你的内容宽度
<view :style="{'max-width':rightSafeArea}">

2.在uview组件上修改样式不会生效，需要在外面套view

或者是在小程序开发工具中看下没有生效的view样式类名，用::v-deep写样式，h5和小程序用条件编译

3.顶部导航栏

顶部为搜索栏，可以获取胶囊信息设置

javascript 复制代码

const { height, top } = uni.getMenuButtonBoundingClientRect()
let statusBarHeight
uni.getSystemInfo({
	success: (e) => {
        statusBarHeight=e.statusBarHeight
    }
})
this.height= height + (top - statusBarHeight) * 2;

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

javascript 复制代码

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

4.小程序底部占位

底部安全距离padding-bottom: env(safe-area-inset-bottom);