记录一段神坑
最近在做一个天气的小程序，在左边需要自定义一个设置按钮，冥思苦想也没找到不破坏风格的写法，于是乎，就把邪恶的小手伸向了右边的胶囊按钮，令我万万没想到的是...
小程序的官方文档给我们挖了一个大坑！
不多说，上文档 微信小程序设计指南
Android
iOS
然后作为老实人的我就按文档写了样式，发现怎么调怎么不对
好吧，作为一枚前端，必须要有自己的设计追求！
于是我就手动调了按钮，半小时之后总算满意了。
.capsule {
width: 70px;
border: 1px solid hsla(0, 0%, 100%, 0.25);
border-radius: 27px;
background: hsla(0, 0%, 100%, 0.6);
line-height: 1;
position: absolute;
left: 7pt;
top: 24px; /*iOS*/
top: 30px; /*Android*/
}
.capsule, .capsule>text {
display: flex;
align-items: center;
}
.capsule>text {
flex: 1;
height: 30px;
justify-content: center;
}
你可以分析理解一下这段代码。其他的话我就不多说了...
反正你叫我雷锋就好了...
文章最后，硬广一波最近写的这个天气小程序
草创之初，还有诸多不完善的地方，还请各位批评指正！
iTools工具箱
