微信小程序 头部适配 胶囊

微信小程序  头部适配 胶囊

样式如上图所示它的要求:一个头部样式自定义,它在胶囊左边的内容又分为左右两部分,如何让它屏幕宽自适应?只需要用到wx.getMenuButtonBoundingClientRect()获取胶囊信息就可以写出来

例子如下

1 let menuButton=wx.getMenuButtonBoundingClientRect()
2 this.setData({
3    signaHeight:menuButton.height
4    signaTop:menuButton.top
5    signaRight:menuButton.right
6    signaLeft:menuButton.left
7    signaWidth:menuButton.width
8 })

然后在页面中的样式就可以写了,红色区域的宽就是胶囊距离左边的距离{{signaLeft}}px,距离上面的距离用padding-top写{{signaTop}},高也就是胶囊的高{{signaHeight}}

微信小程序 头部适配 胶囊

上一篇:prometheus-operator 配置企业微信报警


下一篇:微信公众平台获取用户地理位置之开发文档详解