小程序
小游戏
企业微信
微信支付
扫描小程序码分享
现在要做自定义的导航栏,有一排导航按钮需要跟那个原生的胶囊按钮对齐
找到了官方的设计指导: https://developers.weixin.qq.com/miniprogram/design/image/13titlebar.jpg?t=18082920
然后按图上给出的尺寸做了一个方块:
可以看到,只有右边的7pt是准确的,其他尺寸全都没对上。
我的问题是,这个胶囊尺寸的大小和位置究竟是怎样的?
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
.capsule {
width: 87px;
width
:
87px
;
border: 1px solid hsla(0, 0%, 100%, .25);
border
1px
solid
hsla(
0
,
0%
100%
, .
25
);
border-radius: 27px;
border-radius:
27px
background: hsla(0, 0%, 100%, .6);
background
: hsla(
6
line-height: 1;
line-height
1
font-size: 0
font-size
}
.capsule, .capsule>a {
display: flex;
display
: flex;
align-items: center
align-items:
center
.capsule>a {
flex: 1;
flex:
height: 30px;
height
30px
justify-content: center;
justify-
content
padding: 6.4px 0
padding
6.4px
你可以分析理解一下这段代码.话我就不多说了...我就是知道,哈哈...
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
Object wx.getMenuButtonBoundingClientRect()
现在已经可以通过以上方法获取。https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
.capsule {width:87px;border:1pxsolidhsla(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.4px0}你可以分析理解一下这段代码.话我就不多说了...我就是知道,哈哈...
Object wx.getMenuButtonBoundingClientRect()现在已经可以通过以上方法获取。https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html