现在要做自定义的导航栏,有一排导航按钮需要跟那个原生的胶囊按钮对齐
找到了官方的设计指导: https://developers.weixin.qq.com/miniprogram/design/image/13titlebar.jpg?t=18082920
然后按图上给出的尺寸做了一个方块:
可以看到,只有右边的7pt是准确的,其他尺寸全都没对上。
我的问题是,这个胶囊尺寸的大小和位置究竟是怎样的?
现在要做自定义的导航栏,有一排导航按钮需要跟那个原生的胶囊按钮对齐
找到了官方的设计指导: https://developers.weixin.qq.com/miniprogram/design/image/13titlebar.jpg?t=18082920
然后按图上给出的尺寸做了一个方块:
可以看到,只有右边的7pt是准确的,其他尺寸全都没对上。
我的问题是,这个胶囊尺寸的大小和位置究竟是怎样的?
2 个回答
.capsule {
width
:
87px
;
border
:
1px
solid
hsla(
0
,
0%
,
100%
, .
25
);
border-radius:
27px
;
background
: hsla(
0
,
0%
,
100%
, .
6
);
line-height
:
1
;
font-size
:
0
}
.capsule, .capsule>a {
display
: flex;
align-items:
center
}
.capsule>a {
flex:
1
;
height
:
30px
;
justify-
content
:
center
;
padding
:
6.4px
0
}
你可以分析理解一下这段代码.话我就不多说了...我就是知道,哈哈...
Object wx.getMenuButtonBoundingClientRect()
现在已经可以通过以上方法获取。https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html