开发随手笔记
最近在进行小程序的开发过程中,需要将页面搜索框进行吸顶操作,要对不同的手机屏幕进行自适应设置,故此记录。
- 手机适应主要为刘海屏及其他屏幕
刘海屏:
普通屏幕: - 搜索框吸顶,屏幕适应主要避免刘海屏遮挡问题
通过计算右侧胶囊按钮到顶部距离,判断手机屏幕类型,之后进行搜索框位置距离设置。
let that = this
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
console.log(menuButtonInfo.top,'menuButtonInfo.top;')
that.topHeader = menuButtonInfo.top
获取距离高度 topHeader
- 根据 topHeader 动态设置搜素框高度