如果你问我现在做微信小程序开发还有没有机会的话，我可以明确的告诉你，有的，绝对有的，还有很多Bug没解决。
随着项目功能开发的逐渐增加，遇到的问题也逐渐增加，今天咱不说三国(好像跟三国也没多大关系)，就说下细边框问题。
如果你不是追求完美的程序员，请绕路，无须往下看，如果是，你仔细比较一下左右两张图中的分割线有什么不同？--没错，小程序官方组件展示中的分割线(边框)要比微信的粗很多，就算是闭着眼睛也是能看出来的。
为了解决以上问题，我可是费了九牛二虎之力的，倒不是说实现有多难，而是网上找不到完美的答案。可能是我笨的原因，用搜索搜到的广告竟然比答案要多得多。
好了，我就不卖关子了，直接上程序员最喜欢的内容，千万不要误会，我说的不是美女图，而是源代码来的。
微信样式表文件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);
}
微信标记语言文件index.wxml中的文件内容如下：
<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>
改进后的效果给你look 一 look。如果有时间的话，可以下载小程序官方组件展示的源代码，你会发现weui.wxss中，是没有对边框进行处理的，把我上面的代码补充到weui.wxss里面去就好了。记得除了after，还得有before哦。
网友评论