收藏
回答

胶囊按钮的大小和位置与官方描述不符，求教真实尺寸

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

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


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


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

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


最后一次编辑于  2018-09-27  （未经腾讯允许，不得转载）
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 小茶
    小茶    2018-09-28

    .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

    }

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

    2018-09-28
    赞同 2
    回复
  • Coande
    Coande    06-21
    Object wx.getMenuButtonBoundingClientRect()

    现在已经可以通过以上方法获取。https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html

    06-21
    赞同
    回复
相关问题