大众点评

自定义头部适配各类机型实现思路

首先想自定义这个页面的头部的时候
需要把app.json里的:"navigationStyle": "custom" 这句代码放入当前页面的.json文件
然后正常按照结构设置基样式, 然后我们会发现我们设置的固定宽高在切换机型的时候不能完美适配!
但是可以发现右上角的胶囊位置总是固定的, 现在就可以利用官方提供的API wx.getMenuButtonBoundingClientRect()

通过查看输出结果而知这是胶囊在各个手机端的固定位置, 例如 top:63 这代表胶囊自身顶部距离手机顶部的位置为63px(这里的px单位是官方提供的,不能为rpx)!

此时有了参照物我们就可以设置自身搜索框的距离了

把input框与顶部的距离取胶囊的与顶部的距离,宽度设为:最左侧到胶囊左侧的距离之后就会发现虽然胶囊不会再覆盖input框了,但是盒子的背景色不会填满整个区域,因为宽度没够!
这是在外面再包裹一个父级盒子即可!