微信小程序 头部适配 胶囊


样式如上图所示它的要求:一个头部样式自定义,它在胶囊左边的内容又分为左右两部分,如何让它屏幕宽自适应?只需要用到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}}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM