源代码 (wechatide://minicode/tKP6ePmX792N)
为什么要进行测试?因为官方的例子与实际差距甚远...
胶囊大小测试.感兴趣的可以使用实际手机测试一下.位置.并反馈结果.
请留言,注明设备及调试好的样式代码.
.capsule {
position: absolute;
top: 30px;//主要是这几项
right: 10px;//主要是这几项
width: 93px;//主要是这几项
border: 1px solid hsla(0, 0%, 100%, 0.25);
border-radius: 54rpx;//主要是这几项
background: hsla(0, 0%, 100%, 0.6);
line-height: 1;
font-size: 0;
}
.capsule, .capsule>.link {
display: flex;
align-items: center;
}
.capsule>.link {
flex: 1;
font-size: 12px;
height: 30rpx;//主要是这几项
justify-content: center;
padding: 6.4px 0;
color: #000;
}
/*胶囊位置(px)*/
//android
top: statusBarHeight + 8
right: 10
width: 95
height: 32
//ios
top: (statusBarHeight + 4) || 24
right: 7
width: 87
height: 32
谢谢
十一假期,没有没工友响应一下呢.
国庆快乐~