記錄一段神坑
最近在做一個(gè)天氣的小程序，在左邊需要自定義一個(gè)設(shè)置按鈕，冥思苦想也沒找到不破壞風(fēng)格的寫法，于是乎，就把邪惡的小手伸向了右邊的膠囊按鈕，令我萬(wàn)萬(wàn)沒想到的是...
小程序的官方文檔給我們挖了一個(gè)大坑！
不多說，上文檔??微信小程序設(shè)計(jì)指南
?
Android
?
iOS
?
然后作為老實(shí)人的我就按文檔寫了樣式，發(fā)現(xiàn)怎么調(diào)怎么不對(duì)
好吧，作為一枚前端，必須要有自己的設(shè)計(jì)追求！
于是我就手動(dòng)調(diào)了按鈕，半小時(shí)之后總算滿意了。
.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;
}
你可以分析理解一下這段代碼。其他的話我就不多說了...
反正你叫我雷鋒就好了...
?
文章最后，硬廣一波最近寫的這個(gè)天氣小程序
草創(chuàng)之初，還有諸多不完善的地方，還請(qǐng)各位批評(píng)指正！
iTools工具箱
