胶囊按钮的大小和位置与官方描述不符，求教真实尺寸
发布于 6 年前 作者 pingfu 4169 次浏览 来自 问答

现在要做自定义的导航栏，有一排导航按钮需要跟那个原生的胶囊按钮对齐

找到了官方的设计指导： https://developers.weixin.qq.com/miniprogram/design/image/13titlebar.jpg?t=18082920

然后按图上给出的尺寸做了一个方块：

可以看到，只有右边的7pt是准确的，其他尺寸全都没对上。

我的问题是，这个胶囊尺寸的大小和位置究竟是怎样的？

2 回复
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

}

你可以分析理解一下这段代码.话我就不多说了…我就是知道,哈哈…

回到顶部