小程序
小游戏
企业微信
微信支付
扫描小程序码分享
现在要做自定义的导航栏,有一排导航按钮需要跟那个原生的胶囊按钮对齐
找到了官方的设计指导: 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
:
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