如果你問我現(xiàn)在做微信小程序開發(fā)還有沒有機(jī)會(huì)的話岔激，我可以明確的告訴你勒极，有的，絕對(duì)有的虑鼎，還有很多Bug沒解決辱匿。
隨著項(xiàng)目功能開發(fā)的逐漸增加，遇到的問題也逐漸增加炫彩，今天咱不說三國(guó)(好像跟三國(guó)也沒多大關(guān)系)匾七，就說下細(xì)邊框問題。
如果你不是追求完美的程序員江兢，請(qǐng)繞路乐尊，無須往下看，如果是划址，你仔細(xì)比較一下左右兩張圖中的分割線有什么不同？--沒錯(cuò)限府，小程序官方組件展示中的分割線(邊框)要比微信的粗很多夺颤，就算是閉著眼睛也是能看出來的。
為了解決以上問題胁勺，我可是費(fèi)了九牛二虎之力的世澜，倒不是說實(shí)現(xiàn)有多難，而是網(wǎng)上找不到完美的答案署穗×攘眩可能是我笨的原因，用搜索搜到的廣告竟然比答案要多得多案疲。
好了封恰，我就不賣關(guān)子了，直接上程序員最喜歡的內(nèi)容褐啡，千萬不要誤會(huì)诺舔，我說的不是美女圖，而是源代碼來的备畦。
微信樣式表文件Index.wxss中的源代碼如下：
Page?{
?background-color:?#ededed;
}
.outer?{
?display:?flex;
?flex-direction:?column;
?background-color:?#fff;
?margin-top:?50px;
?padding-left:?16px;
?color:?#353535;
?height:?140px;
}
.inner?{
?display:?flex;
?flex-direction:?row;
?flex-wrap:?nowrap;
?align-items:?center;
?height:?46px;
}
.line?{
?position:?relative;
?width:?100%;
}
.line:after?{
?content:?" ";
?position:?absolute;
?left:?0;
?right:?0;
?height:?1px;
}
.line:after?{
?box-sizing:?border-box;
?transform:?scaleY(0.5);
?transform-origin:?0?0;
?top:?0;
?border-top:?1px?solid?rgba(0,?0,?0,?0.2);
}
微信標(biāo)記語言文件index.wxml中的文件內(nèi)容如下：
<view?class="outer">
?<view?class="inner">中間油條分割線,你看得見么?</view>
?<view?class="line"?/>
?<view?class="inner">如果看不見低飒，那就用放大鏡瞧.</view>
?<view?class="line"?/>
?<view?class="inner">沒有放大鏡的話，就用顯微鏡.</view>
</view>
<view?class="outer">
?<view?class="inner">中間油條分割線,你看得見么?</view>
?<view?class="line"?/>
?<view?class="inner">如果看不見懂盐，那就用放大鏡瞧.</view>
?<view?class="line"?/>
?<view?class="inner">沒有放大鏡的話褥赊，就用顯微鏡.</view>
</view>
改進(jìn)后的效果給你look?一?look。如果有時(shí)間的話莉恼，可以下載小程序官方組件展示的源代碼拌喉，你會(huì)發(fā)現(xiàn)weui.wxss中速那，是沒有對(duì)邊框進(jìn)行處理的，把我上面的代碼補(bǔ)充到weui.wxss里面去就好了司光。記得除了after琅坡，還得有before哦。
